使用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>數組，該數組應該可以完成預期的工作。