React自动为组件数组添加key的工具函数报错，如何解决？

我编写了一个名为keyIt的工具函数，它接收一组React组件数组，返回自动添加了key属性的组件数组，代码如下：

const keyIt = (components) => {
  const keyedComponents = components.map((Component, i)=><Component key={i}/>)
  return keyedComponents
}

使用示例：

const Sidenav = (props)=> {
  return (keyIt([
    <ListItem>Home</ListItem>,
    <ListItem>About</ListItem>,
    <ListItem>Contact</ListItem>,
    <ListItem>Downloads</ListItem>,
    <ListItem>Plans</ListItem>,
  ]))
}

该工具用于在确定列表顺序不会改变时自动添加key以消除报错，但运行后出现以下错误：

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: <ForwardRef(ListItem) />. Did you accidentally export a JSX literal instead of a component?

问题原因 #

错误的核心是你把已经生成的JSX元素当成了组件类型来渲染。
你传入keyIt的components数组里，每一项都是已经通过<ListItem>...</ListItem>生成的JSX元素实例（本质是React.createElement的返回值），但在map里你用<Component key={i}/>的语法，把它当作组件函数/类去调用，这就违反了React的规则——React期望组件类型是字符串（原生DOM组件）、类或函数，而不是现成的JSX元素，因此抛出警告。

解决方法 #

正确的做法是直接给已有的JSX元素添加key属性，通过React.cloneElement克隆原元素并合并新props实现：

import React from 'react'; // 确保导入React

const keyIt = (components) => {
  return components.map((element, index) => 
    React.cloneElement(element, { key: index })
  );
};

React.cloneElement会复制传入的JSX元素，保留其所有子节点、原有props，同时添加/覆盖新的props（这里就是key），这样既完成了key的添加，又不会破坏原元素的结构和功能。

使用示例无需修改，直接调用即可消除警告。

内容的提问来源于stack exchange，提问作者Islam Y-