reactjs - React - 组件不会在 foreach 循环中呈现？

Question

我有一个小应用程序，当您打开一个选项卡时，React Route 会重定向到给定的组件(容器)。我想从容器中渲染子组件。我使用 foreach 循环遍历一个列表，该列表包含需要提供给 child 的 Prop 。但是， child 不会被渲染。

我不想使用 map ，因为我使用依赖于列表类的库。

render() {   
    return ( 
        <div>
            {this.state.list.ForEach((element) => 
                <ChildComponent childName={element.name} 
        }
        </div> 
    );
}

}

Answer 1

你在混淆Array.forEach与 Array.map . forEach 不返回任何内容。正确的做法是:

<div>
    {this.state.list.map((element, index) => 
        <ChildComponent key={index} childName={element.name} />
    )}
</div> 

map 将给定的 element 转换为另一个元素，在本例中为组件。调用 map 的结果是随后呈现的组件数组。 forEach 始终返回 undefined 因此您的代码的结果与编写的结果相同:

<div>
   {undefined}
</div>

请注意，在呈现组件列表时，key 也是必需的。