Question

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

Answer 1

不要使用innerHTML。

以正常方式渲染你的div

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

如果您尝试直接更改DOM，React正在使用虚拟DOM，那么您将遇到一些问题。

希望它有所帮助。

在reactjs app中反应JS小部件，导致---不变违规：ReactMount：两个有效但不相等的节点具有相同的`data-reactid

1 个答案: