reactjs - 从数组渲染 React 组件

Question

我有一组对 react 组件的引用。我如何渲染它们？

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的链接.