reactjs应用程序中的reactjs小部件，导致----不变冲突:ReactMount:两个有效但不相等的节点具有相

React JS widget inside reactjs app, causing --- Invariant Violation: ReactMount: Two valid but unequal nodes with the same `data-reactid

本文关键字：reactjs 有效 两个 不相等 节点 导致 小部 ---- ReactMount 应用程序 冲突      更新时间：2023-09-26

我有一个父ReactJS应用程序，还有来自另一个应用程序的ReactJS小部件的占位符。这导致不变冲突：ReactMount：两个有效但不相等的节点具有相同的"data reactid">。我该怎么解决这个问题？有没有办法设置数据反应的启动顺序？

--index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="/build/stylesheet/main.css">
    <script src="/build/javascript/app.js" type="text/javascript" charset="utf-8" defer></script>
    <script src="http://localhost:58/build/javascript/Modal.js" type="text/javascript" charset="utf-8" defer></script>
</head>
<body>
</body>
</html>

--app.js

var React = require('react');
var Wrapper = require("./components/Wrapper.react.js");
React.render(<Wrapper/>,document.getElementsByTagName('body')[0]);

包装元素只是一个开始，但它更深刻。

现在是来自另一台服务器的外部文件。我可以改变。

--Modal.js(来自另一台服务器(

document.body.innerHTML+="<div class='p-modal p-fade p-save-modal'></div>";
var React = require('react');
var Modal= require('./components/SaveModal.react');
React.render(
    <oa/>,
    document.querySelector(".p-save-modal")
);

在这里，我将元素附加到主体中，并在其中加载React组件。

不要使用innerHTML。

以正常方式渲染div

React.render(<div class='p-modal p-fade p-save-modal'></div>, //your body or whatever)

React使用的是虚拟DOM。如果您试图直接更改DOM，则会遇到一些问题。

希望能有所帮助。

相关文章：