ステートレス機能コンポーネントである配列要素にキーを追加する方法

Question

親コンポーネントでは、一連の機能コンポーネントで2D配列を作成しています。しかし、私は配列に入れているので、各要素には一意のキーが必要です。ステートレス機能コンポーネントでこれを行うベストプラクティスは何ですか？

var dim = this.props.dim; 

    var cells = []; 
    for (var i = 0; i < dim; i++) { 
     var row = []; 
     for (var j = 0; j < dim; j++) { 
     row.push(Cell({dim:10, isAlive:this.state.matrix[i][j].isAlive})) 
     } 
     cells.push(row); 
    }; 

Answer 1

機能コンポーネント（Cell）を機能コンポーネントとして使用していません。あなたはそれらを関数のように呼び出すことは想定していません。あなたはに、Reactを使ってをレンダリングすることになっています。

var dim = this.props.dim; 

var cells = []; 
for (var i = 0; i < dim; i++) { 
    var row = []; 
    for (var j = 0; j < dim; j++) { 
    row.push(React.createElement(Cell, {key:`${i}-${j}`, dim:10, isAlive:this.state.matrix[i][j].isAlive}, null); 
    } 
    cells.push(row); 
}; 

両方これらのフォームは、あなたがkeyプロパティに渡すことができ、それを消費に反応できるようにAPIリアクト

var dim = this.props.dim; 

var cells = []; 
for (var i = 0; i < dim; i++) { 
    var row = []; 
    for (var j = 0; j < dim; j++) { 
    row.push(<Cell key={`${i}-${j}`} dim={10}, isAlive={this.state.matrix[i][j].isAlive> />); 
    } 
    cells.push(row); 
}; 

をそれとも、使用することができます。

あなたはJSX構文を使用することができます。唯一

Answer 2

index = i * dim + jで指定された要素のインデックスを追加できます。これはすべてのアイテムと連続したユニークな方法です。このような子にパスarrWithKeys

// parent 
 
const arr = ['i', 'like', 'cats'] 
 

 
const arrWithKeys = arr.map((item, i) => ({ key: i, item })) 
 

 
console.log(arrWithKeys) 
 

 
// child 
 
arrWithKeys.forEach((thing) => console.log(`<Something key={${thing.key}} item={${thing.item}} />`))

：ここ

Answer 3

はあなたがで作業することができるはず例です

<Component arrWithKeys={arrWithKeys} /> 

と内側にアクセス成分は、this.props.arrWithKeys

Answer 4

使用JSX構文：

class mat extend Component{ 
render(){ 
    return <div> 
    {this.state.matrixCell.map((row, i)=>row.map((col, k)<Cell key={i*dim+k} dim={10} isAlive = {col.isAlive}))} 
    </div>; 
    } 
}