从数组中渲染 React 组件答案

【问题标题】：Render React components from array从数组中渲染 React 组件
【发布时间】：2017-03-03 17:20:43
【问题描述】：

我有一个反应组件的引用数组。如何渲染它们？

myArray = [Component1, Component2, Component3];

我正在寻找渲染函数，当给定数组时，它会渲染这个：

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

【问题讨论】：

标签： reactjs

【解决方案1】：

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

像这样，例如如果myComponents 包含[MyComponent1, MyComponent2, MyComponent3] 那么

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

这是JSFiddle的链接。

【讨论】：

这无济于事，因为组件的类型不同。 render 函数对数组一无所知，只是知道它是一个 react 组件数组。
你见过小提琴吗？数组中的所有组件都不同。你从哪里得到一个数组？数组是如何传递的？
哦，我很抱歉...我误读了代码，起初并没有意识到 MyComponent 是 map() 函数中的变量。这就像一个魅力，谢谢！
是的，这似乎有点误导，因为通常变量以驼峰字母命名，但在这里我也将其渲染为元素 <MyComponent /> 所以决定不使用驼峰命名。

【解决方案2】：

在 react 16 > 中，您可以像这样在渲染中返回一个组件数组：-

render(){
      return this.state.myArray
    }

【讨论】：

【解决方案3】：

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

【讨论】：

这不适用于 OP 案例。仅当数组包含反应元素时才有效。

【解决方案4】：

如果我正确理解了这个问题 - 尝试在 return 之前将组件设置为一些变量到 render 方法中，然后到 div 中，像对象一样调用这个变量：

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

【讨论】：