使用React，使用多个嵌套元素呈现元素的正确方法是什么？

Question

使用React，如何在其中呈现多个嵌套<div>的{​​{1}}？请参阅下面的代码。

<div>

我使用此代码得到的最终结果是：

CNC中 这样做的正确方法是首先使用var SubTrait = React.createClass({ render: function() { var subTraits = this.props.data; return ( <div className = "subTraitContainer"> <div> { subTraits.forEach(function(subTrait) { return ( <div> <h4>{ subTrait.name }</h4>, Sub-Sub-Traits <SubSubTrait data={ subTrait.children } /> </div> ); })} </div> </div> ); } }); 创建我的节点，然后将创建的节点传递给.forEach函数render吗？ （我正在React Docs查看React Tutorial。我的原始解决方案是否可行，或者是在返回节点之前预先创建节点的唯一方法？

Answer 1

您需要使用map代替forEach。 forEach不返回任何内容，因此结果为：

<div class="subTraitContainer">
  <div></div>
<div>

map返回一个数组。它将给定数组中的每个元素映射到新的元素。例如，您可以将User的数组映射到其username s。如果您使用的是map而不是forEach，那么您将获得一系列<div> s，这应该符合您的预期。