在反应中作为道具传递的孩子数组

Question

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

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

我可以在道具下与孩子一起传递钥匙吗？

如果我想在父级渲染时为子级设置密钥，则抱怨子级的 key prop 是只读的。

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