Dez*_*chu 4 javascript reactjs
我想将多个模态渲染到一个ReactDOM元素中.这是React呈现的HTML结构.
<body>
<div id="modal-socket"></div> // Insert multiple here
<div id="wrapper">
// Other content goes here
</div>
</body>
为什么我需要将多个组件渲染到#modal-socket中有一个很长的故事,但我想做类似于此的事情:
ReactDOM.render(<AddMeasurableModal />, document.getElementById("modal-socket"));
ReactDOM.render(<AddMeasurableModal />, document.getElementById("modal-socket"));
ReactDOM.render(<AddMeasurableModal />, document.getElementById("modal-socket"));
显然这会替换每个渲染调用中#modal-socket的当前内容.所以我没有得到我的最终结果.嘘.
进行了搜索并找到了一些答案,但没有一个满足我的需求.
干杯.
正如您在评论中所说,动态方式将是这样的内部您可以做的主要组件:
想象一下如下阵列:
let myArray = [
{
prop1: 'hello world'
},
{
prop1: 'Hey there!'
}
]
//Then in the render function (you can put that array into the state or something)
render(){
return (
<div>
{myArray.map((entry,index) => {
return <AddMeasurableModal key={index} {...entry} />
})}
</div>
)
}
这将创建AddMeasurableModal与myArray变量中的entrits 一样多的组件,并将存储为props的每个属性添加到组件中(在这种情况下,由于扩展语法,每个AddMeasurableModal组件都可以访问该this.props.prop1值{...entry})
注意我怎么只myArray.map()在里面放入渲染函数{}？React渲染每个组件数组,而无需在render函数内进一步配置.并Array.map()返回一个数组.只要确保只返回有效的反应元素!这样做时,不要忘记key为每个元素添加一个uniqe prop以避免警告.
编辑:在这种情况下,key道具是当前索引数组中,但是从服务器读取数据时,我会建议使用潮头ID从数据库或东西,以避免渲染错误.如果您不想映射数组,可以只设置一些组件然后循环它们,创建一个组件数组并将它们放入render函数中.
将多个模态包装到1个容器中并渲染,例如:
let modals = (
<div>
<AddMeasurableModal />
<AddMeasurableModal />
<AddMeasurableModal />
</div>
);
ReactDOM.render(modals, document.getElementById("modal-socket"));