反应:如何在页面中渲染组件两次?
问题描述:
我有一个组件建立阵营myComponent.js
反应:如何在页面中渲染组件两次?
ReactDOM.render(
<MyComponent />,
document.getElementById('my-id')
);
在我的HTML,我想渲染它两次,HTML是如下:
<div id='my-id></div>
some html
<div id='my-id></div>
我想反应在此页面两次渲染,但它只为第二个div渲染一次。无论如何渲染它两次?
答
你不能有相同的id
两或HTML中的更多元素。使用不同的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')
);
答
你可以做
ReactDOM.render(
<div>
<MyComponent />
<MyComponent />
</div>, document.getElementById('my-id'));
,或者您也可以有不同的ID 2个div
标签
<div id='one'></div>
some html
<div id='two'></div>
然后
ReactDOM.render(
<MyComponent />,
document.getElementById('one')
);
ReactDOM.render(
<MyComponent />,
document.getElementById('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')
);
答
另一种选择是使用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
));