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 渲染它们。

您可以使用JSX语法：

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

或者您可以使用React 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(React.createElement(Cell, {key:`${i}-${j}`, dim:10, isAlive:this.state.matrix[i][j].isAlive}, null);
  }
  cells.push(row);
};

这两种形式都允许您传入key属性并允许React使用它。

Answer 2

您可以添加该元素的索引，该索引由index = i * dim + j给出。这种方式对所有项目都是唯一的，也是连续的。

Answer 3

这是一个你应该能够使用的例子：

＆＃13;

// 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}} />`))

＆＃13;

将arrWithKeys传递给孩子：

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

如何将键添加到作为无状态功能组件的数组元素

4 个答案: