logo标签列表

将多个React组件渲染到单个DOM元素中

javascriptreactjs
4
我希望您能够将多个弹出框渲染到单个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的当前内容...所以我没有得到我的最终结果。 哎呀。

我搜索了一下，找到了一些答案，但没有符合我的需求。

干杯。

2个回答
7
作为您所说的评论，动态方式可能如下所示：在主组件中，您可以执行以下操作：
假设有一个数组：
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>
      )
}

这将创建与myArray变量中的条目数量相同的AddMeasurableModal组件，并将存储为属性的每个属性添加到组件中（在这种情况下，由于{...entry}扩展语法的作用，每个AddMeasurableModal组件都可以访问this.props.prop1值）。
注意我只在{}内部的渲染函数中放置了myArray.map()？ React会在渲染函数中自动渲染所有组件数组。而Array.map()返回一个数组。请确保仅返回有效的react元素！在这样做时，不要忘记为每个元素添加一个独特的key属性以避免警告。
编辑：在这种情况下，key属性是数组中的当前索引，但在从服务器获取数据时，我建议使用数据库中的唯一id或类似内容来避免渲染错误。 如果您不想映射整个数组，可以设置一些组件，然后循环它们，创建一个组件数组并将其放入渲染函数中。
6
将多个模态框包装到一个容器中并进行渲染，例如：
let modals = (
  <div>
    <AddMeasurableModal />
    <AddMeasurableModal />
    <AddMeasurableModal />
  </div>
);

ReactDOM.render(modals, document.getElementById("modal-socket"));
谢谢，这非常有帮助。你能想到如何动态地完成这个吗？ - Dezachu
这非常简单，我会为您创建一个示例。 - Joschua Schneider
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接