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

从数组中渲染React组件

4 个答案: