React - 属性を持つ要素を動的に作成し、それを別の要素にネストする方法はありますか？

Question

Reactコンポーネントのrender機能で使用するためにテーブル行を動的に作成しようとしています。私が理解する限り、React.createElement関数を使用して要素を作成することはできますが、動的に生成された一連の要素を連鎖して属性を設定する方法は不明です。例えば：あなたが子供TDの簡単にこのようなとTRを作成することができ

var cols = this.props.array_of_col_objects; 
var react_col_array = []; 
var row = React.createElement("tr"); 
for(c=0;c<cols.length;c++){ 
    var col = React.createElement("td"); 
    // how to set the attributes of this element, e.g. className, id, etc. 

    react_col_array.push(col); 
} 

// How do i now insert the generated column elements into the row element? 

Answer 1

、JSX-構文を使用してmap() -methodであなたのcols-配列をマッピング：

<tr className="row"> 
    {cols.map(function (colData, index) { 
     return <td key={index} data-some-attr={colData.someProperty}>{colData.someOtherProperty}</td>; 
    })} 
</tr> 

注key -attributeされていますマッピング関数で設定すると、Reactのリストの中の要素に指定して、レンダリングプロセスを最適化できるようにする必要があります。これは一意でなければなりません。この場合、配列内の要素のインデックスを使用できます。

あなたはrender() -functionに直接それを使用するか、別の関数にそれを移動してから、このようにそこにそれを使用することができます。

function renderTableRow() { 
    return <tr> ... </tr>; 
} 

render() { 
    return <div>{this.renderTableRow()}</div>; 
} 

---

UPDATE：

申し訳ありませんが、あることを言及するのを忘れてしまいましたカスタム属性（HTML仕様では定義されていません）を設定する場合は、接頭辞としてdata-を指定する必要があります。