多次调用ReactDOM.render

Question

为什么以下内容仅显示一个按钮？

const b = <button>this is a button</button>;
ReactDOM.render(b,mountNode)
ReactDOM.render(b,mountNode)
ReactDOM.render(b,mountNode)

Answer 1

如果mountNode是对DOM元素的引用，则调用ReactDOM.render(b, mountNode)意味着React将把React组件作为innerHTML插入到该节点。

有效地多次调用它意味着您只需继续替换先前安装的节点即可。

如果需要3个按钮，请尝试创建一个包装它们的组件。例如：

var mountNode = document.getElementById("app");

const b = <button>this is a button</button>;
const myApp = <div>{b}{b}{b}</div>;

ReactDOM.render(myApp, mountNode);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<div id="app"></div>

或者：

var mountNode = document.getElementById("app");

const B = () => <button>this is a button</button>;
const MyApp = () => <div><B /><B /><B /></div>;

ReactDOM.render(<MyApp />, mountNode);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>