Question

当一个子数组作为prop传递并循环到父组件中的render时，react会抱怨在数组迭代时缺少唯一键标识符。

克服警告的正确方法是什么？

我可以将钥匙与道具下的孩子一起传递。

如果我想在父母渲染时设置子项的关键字，那就是抱怨孩子的关键道具是只读的。

Answer 1

如果您共享一些代码会更容易。

除非你以某种方式对它们进行扩充，否则你不应该迭代孩子进行渲染。

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        {this.props.children}
      </div>
    )
  }
}

如果必须，可以将它们包裹在div中，然后将密钥应用到该帐户吗？

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        {this.props.children.map((child, index) => (<div key={index}>{child}</div>))}
      </div>
    )
  }
}

我还没有尝试过，但您可以克隆元素并更改密钥

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        {this.props.children.map((child, index) => {React.cloneElement(child, {key: index})})}
      </div>
    )
  }
}

作为反应的道具传递的一系列儿童

1 个答案: