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 s

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

Answer 2

看起来你想在两个不同的地方渲染它，中间有非React代码。为此，您需要提供div个不同的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')
);

Answer 3

你可以做到

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

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

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

然后

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

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

Answer 4

另一种选择是使用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
));

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

4 个答案: