从数组渲染 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的链接。