reactjs应用程序内的React JS小部件，导致---不变违规：ReactMount：两个有效但不相等的节点具有相同的`data-reactid答案

【问题标题】：React JS widget inside reactjs app, causing --- Invariant Violation: ReactMount: Two valid but unequal nodes with the same `data-reactidreactjs应用程序内的React JS小部件，导致---不变违规：ReactMount：两个有效但不相等的节点具有相同的`data-reactid
【发布时间】：2015-09-23 20:01:25
【问题描述】：

我有一个父 ReactJS 应用程序，我也有来自另一个应用程序的 reactjs 小部件的占位符。这会导致 Invariant Violation: ReactMount: 两个有效但不相等的节点具有相同的 `data-reactid' 。我该如何解决？有没有办法设置 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")
);

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

【问题讨论】：

这不是顺序的问题，我自己也有这个问题。这是由于您渲染事物的方式。很遗憾，如果您不发布更多代码，我将无法帮助您。
我已经用代码编辑了这个问题。让我知道是否需要更具描述性

标签： javascript reactjs reactjs-flux react-jsx

【解决方案1】：

不要使用innerHTML。

以正常方式呈现您的 div

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

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

希望对你有帮助。

【讨论】：

没有办法在反应中附加 HTML。 app.js 已经在正文中呈现。如果 modal.js 在 body 内渲染，则移除之前渲染的元素。