Question

我希望将多个模态渲染到单个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的当前内容。所以我不能得到我的最终结果。嘘声。

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

干杯。

Answer 1

将多个模态包装到1个容器中并渲染，例如：

let modals = (
  <div>
    <AddMeasurableModal />
    <AddMeasurableModal />
    <AddMeasurableModal />
  </div>
);

ReactDOM.render(modals, document.getElementById("modal-socket"));

Answer 2

正如你在评论中所说，动态的方式就是这样的在主要组件内部，你可以做到：

想象一下有一个像：

这样的数组

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变量中有托管，并将存储为props的每个属性添加到组件中（在这种情况下，每个AddMeasurableModal组件都可以访问由于this.props.prop1扩展语法

而导致{...entry}值

请注意我是如何只将myArray.map()放入{}内的渲染函数中的？ React渲染每个组件数组，而无需在render函数内进一步配置。 Array.map()返回一个数组。只要确保只返回有效的反应元素！执行此操作时，请不要忘记为每个元素添加uniqe key道具以避免警告。

编辑：在这种情况下，key prop是数组中的当前索引，但是当从服务器获取数据时，我建议使用数据库中的uniqe id或其他东西来避免渲染错误。如果你不想映射数组，你可以设置一些组件然后循环它们，创建一个组件数组并将它们放入渲染函数。

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

2 个答案: