从数组渲染React组件

问题描述：

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

myArray = [Component1, Component2, Component3];

我在寻找的渲染功能，鉴于数组时，会呈现此：

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

答

您可以通过各自为阵，其中每个的元素的迭代元素是组件并将其呈现为JSX元素。

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

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

这里是链接到JSFiddle。

这没有帮助，因为组件的类型不同。渲染函数不知道数组的任何内容，只是它是一个反应组件的数组。 – travelboy

你见过小提琴吗？阵列中的所有组件都不相同。你从哪里得到一个数组？数组如何传递？ –

哦，我的道歉...我误解了代码，并且一开始并没有意识到MyComponent是map（）函数的变量。这就像一个魅力，谢谢你！ – travelboy

答

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

这不会对有机磷农药的情况下工作。它只会在数组包含反应元素时起作用。 –

答

如果我正确理解问题 - 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组件

相关推荐