javascript - 使用 React.cloneElement 对这种特殊的 React 唯一键道具警告有何解释？

Question

我有一个List接受作为孩子的组件：

type Props = {
   children: React.ReactElement[]
}

在我的主要组件中，我有：

return <List>
  <div .../>
  <div .../>
<List/>

在List组件中：

当我做

render() {
        return <div ...>
            {
                this.props.children.map((c, i) => {
                    return React.cloneElement(c, {key: i});
                })
            }
        </div>;

一切正常，但是当我 wrap React.cloneElementinside时<></>，React 会抛出唯一的 prop key 警告。

return <>
 {React.cloneElement(c, {key: i})}
</>

这是为什么 ？

标签： javascriptreactjstypescriptreact-props