React：设置从子项渲染的组件的键

Question

我收到警告“数组或迭代器中的每个子节点都应该有一个唯一的”key“prop。”使用下面的代码。如果我删除片段并用一个密钥将它包装在div中，它可以工作，但是我的每个组件都有一个额外的div和一个密钥。我不确定为什么这个解决方案不起作用。根据它应该的文件。

  <div ref={c => (this._gallery = c)}>
      {thumbs.map((image, index) => {
        return (
          <React.Fragment>
          {this.props.children({
            margin: margin,
            index: index,
            image: image,
            key: image.key || image.src,
            onClick: onClick ? this.handleClick : null
          })} 
          </React.Fragment>
        );  
      })} 
    </div>

密钥正确显示在html中：

Answer 1

您可以在＆＃39; React.Fragment＆＃39;上添加关键道具。

Answer 2

您不需要在Fragment中包装每个元素。 key应该在顶级元素上，而您的顶部元素是片段。

<div ref={c => (this._gallery = c)}>
  {thumbs.map((image, index) => {
    return (
      {this.props.children({
        margin: margin,
        index: index,
        image: image,
        key: image.key || image.src,
        onClick: onClick ? this.handleClick : null
      })} 
    );  
  })} 
</div>