React：如何在页面中两次渲染组件？答案

【问题标题】：React: How to render a component twice in a page?React：如何在页面中两次渲染组件？
【发布时间】：2018-01-26 05:38:50
【问题描述】：

我在 ReactmyComponent.js 中有一个组件构建

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

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

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

我想在这个页面中反应渲染两次，但它只为第二个 div 渲染一次。反正有没有渲染两次？

【问题讨论】：

标签： javascript html reactjs frontend

【解决方案1】：

另一种选择是使用class 来定义要渲染的元素：

<div id="my-id-one" class="render-here"></div>
some html
<div id="my-id-two" class="render-here"></div>

然后在js:

let elements = document.getElementsByClassName('render-here');
elements.map(element => ReactDOM.render(
  <MyComponent />,
  element
));

【讨论】：

【解决方案2】：

你可以的

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

或者你也可以有两个div 不同id的标签

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

然后

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

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

【讨论】：

【解决方案3】：

看起来你想在 2 个不同的地方渲染它，中间有非 React 代码。为此，您需要为您的 divs 提供不同的 ID：

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

然后将组件渲染到每个div：

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

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

【讨论】：

【解决方案4】：

对于 HTML 中的两个或多个元素，您不能使用相同的 id。使用不同的ids

<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')
);

【讨论】：