javascript - react : How to render a component twice in a page?

Question

我在 React 中构建了一个组件myComponent.js

ReactDOM.render(
  <MyComponent />,
  document.getElementById('my-id')
);

在我的 Html 中，我想渲染它两次，HTML 如下:

<div id='my-id></div>
some html
<div id='my-id></div>

我想在这个页面中渲染两次，但它只为第二个 div 渲染一次。无论如何渲染它两次？

Answer 1

HTML 中的两个或多个元素不能具有相同的 id。使用不同的 id

<div id='my-id-one></div>
some html
<div id='my-id-two></div>

并为每个 id 分别调用 ReactDOM.render。

ReactDOM.render(
  <MyComponent />,
  document.getElementById('my-id-one')
);

ReactDOM.render(
  <MyComponent />,
  document.getElementById('my-id-two')
);