从数组渲染React组件

Question

我有一系列的参考来反应组件。 如何渲染它们？

myArray = [Component1, Component2, Component3];

我正在寻找的渲染函数，当给定数组时，将渲染此：

<div>
  <Component1 />
  <Component2 />
  <Component3 />
</div>

Answer 1

您可以遍历数组的每个元素，其中每个元素都是组件，并将其呈现为JSX元素。

这样，例如，如果myComponents包含[MyComponent1, MyComponent2, MyComponent3]则

renderMyComponents(myComponents){
     return myComponents.map((MyComponent, index) => {
          return (
               <li key={index}>
                   <MyComponent />
               </li>
          )
     });
}

这是到JSFiddle的链接。

Answer 2

在react 16>中，您可以像这样在render内部返回一个组件数组：

render(){
      return this.state.myArray
    }

Answer 3

render() {
  return (
    <div>
      <ul>
        {myArray}
      </ul>
    </div>
  );
}

Answer 4

如果我正确地理解了问题，请尝试将组件设置为一些变量，然后再return到render方法，然后再进入div，将这些变量称为object：

render:
myArray = [Component1, Component2, Component3];
var myComp1 = myArray[0];
var myComp2 = myArray[1];
var myComp3 = myArray[2];
.....some code
return
....some code
<div>
  {myComp1}
  {myComp2}
  {myComp3}
</div>

更新 React 16 ：（这样，在DOM中所有元素（例如同级兄弟）中都不会多余的DIV包装器）

render(): {
  const myArray = [Component1, Component2, Component3];
  .....some code
  return
  ....some code
  <>
    myArray.map((component) => {
      return({component})
    })
  </>
}