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

Question

使用反应过来，我怎么呈现<div>与多个嵌套<div>的内线呢？ 请参见下面的代码。

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

通过此代码得到的最终结果是：

-edit-这样做的正确方法是先使用.forEach创建我的节点，然后将创建的节点传递给render函数的return吗？ （我正在看React Docs上的React教程。我的原始解决方案是否可能，还是在返回节点之前预先创建节点的唯一方法？

Answer 1

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

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

map返回一个数组。 它将给定数组中的每个元素映射到新对象。 例如，您可以将User数组映射到username s。 如果使用map而不是forEach ，则将获得一个<div>数组，该数组应该可以完成预期的工作。