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

Question

I'm looking to render multiple modals into a single ReactDOM element.我希望将多个模态渲染到单个 ReactDOM 元素中。 Here's the HTML structure that React renders to.这是 React 呈现的 HTML 结构。

<body>
    <div id="modal-socket"></div> // Insert multiple here
    <div id="wrapper">
        // Other content goes here
    </div>
</body>

There's a long story behind why I need to render multiple components into #modal-socket but I want to do something akin to this:为什么我需要将多个组件渲染到 #modal-socket 背后有一个很长的故事，但我想做一些类似于这样的事情：

ReactDOM.render(<AddMeasurableModal />, document.getElementById("modal-socket"));
ReactDOM.render(<AddMeasurableModal />, document.getElementById("modal-socket"));
ReactDOM.render(<AddMeasurableModal />, document.getElementById("modal-socket"));

Obviously this replaces the current content of #modal-socket on each render call.. So I don't get my end result.显然，这会在每次渲染调用时替换 #modal-socket 的当前内容。所以我没有得到我的最终结果。 Boo.嘘。

Did a search and found a few answers on it but none meet my needs.进行了搜索并找到了一些答案，但没有一个满足我的需求。

Cheers.干杯。

Answer 1

As you told in a comment, the dynamic way would be something like this Inside of a main component you could do:正如您在评论中所说，动态方式将是这样的在您可以执行的主要组件内部：

Imagine having an array like:想象一下有一个像这样的数组：

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>
      )
}

this will create as many AddMeasurableModal components as there are entrys in the myArray variable and add every property stored as props onto the component (In this case, every AddMeasurableModal component has access to the this.props.prop1 value, because of the {...entry} spread syntax)这将创建与myArray变量中的AddMeasurableModal一样多的AddMeasurableModal组件，并将存储为 props 的每个属性添加到组件上（在这种情况下，每个AddMeasurableModal组件都可以访问this.props.prop1值，因为{...entry}传播语法）

Notice how I only put myArray.map() into the render function inside of {} ?请注意我如何只将myArray.map()放入{}内的渲染函数中？ React renders every array of components without further configuration inside of the render function. React 渲染每个组件数组，而无需在渲染函数内部进一步配置。 And Array.map() returns an array. Array.map()返回一个数组。 Just make sure to return only valid react elements!只要确保只返回有效的反应元素！ When doing this, don't forget to add a uniqe key prop to each element to avoid warnings.执行此操作时，不要忘记为每个元素添加一个 uniqe key属性以避免警告。

EDIT: in this case, the key prop is the current index in the array, but when fetching data from a server I would recommend to use a uniqe id from the database or something to avoid rendering bugs.编辑：在这种情况下， key道具是数组中的当前索引，但是当从服务器获取数据时，我建议使用数据库中的 uniqe id 或其他东西以避免呈现错误。 If you don't want to map over an array, you can just set a number of components and then loop over them, creating an array of components and put them into the render function.如果你不想映射数组，你可以只设置一些组件，然后循环遍历它们，创建一个组件数组并将它们放入渲染函数中。

Answer 2

Wrap your multiple modals into 1 container and render that, eg:将您的多个模态包装到 1 个容器中并进行渲染，例如：

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

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

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

问题描述

2 个解决方案

解决方案1
7 已采纳 2016-05-22 20:35:54

解决方案2
6 2016-05-22 19:56:07

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

问题描述

2 个解决方案

解决方案1 7 已采纳 2016-05-22 20:35:54

解决方案2 6 2016-05-22 19:56:07

解决方案1
7 已采纳 2016-05-22 20:35:54

解决方案2
6 2016-05-22 19:56:07