我在 React 中构建了一个组件myComponent.js
ReactDOM.render(
<MyComponent />,
document.getElementById('my-id')
);
在我的 Html 中，我想渲染它两次，HTML 如下：
<div id='my-id></div>
some html
<div id='my-id></div>
我想在这个页面中react渲染两次，但它只为第二个 div 渲染一次。无论如何要渲染它两次吗？
React：如何在页面中渲染组件两次？
IT技术
javascript
html
reactjs
frontend
2021-04-26 22:53:23
4个回答
idHTML 中的两个或多个元素不能相同。使用不同id的
<div id='my-id-one></div>
some html
<div id='my-id-two></div>
并ReactDOM.render为每个 id 分别调用。
ReactDOM.render(
<MyComponent />,
document.getElementById('my-id-one')
);
ReactDOM.render(
<MyComponent />,
document.getElementById('my-id-two')
);
看起来你想在 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')
);
你可以做
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')
);
另一种选择是使用 aclass来定义要呈现的元素：
<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
));