React中使用React.cloneElement()为克隆组件传入key的正确方法

我有一个可接收元素数组作为props的Tabs标签组件，尝试使用React.cloneElement()为克隆元素分配key属性但始终未生效。我将元素以数组形式传入组件后，遍历该元素数组，克隆数组内的每个组件并尝试为每个元素分配key，但一直收到“列表中每个组件都应携带key prop”的警告，该如何通过React.cloneElement()正确为组件分配key？

原有实现代码 #

Tabs组件代码 #

import React, {useState, useEffect, useCallback} from 'react';
import classes from './tabs.module.css';

const Tabs = ({ tabsData, active = 0 }) => {
    const [activeTab, setActiveTab] = useState(active);

    const setActiveTabIndex = useCallback((index) => {
        setActiveTab(index)
    }, [activeTab])

  return (
    <div className={classes.tabsContainer}>
        <ul className={classes.tabsList}>
            {
            tabsData.map((item, index) => (
                <li className={`${classes.tab} ${index === activeTab && classes.activeTab}`} onClick={() => setActiveTabIndex(index)}>{ item.tabTitle }</li>
            ))}
        </ul>
        <div className={classes.textContainer}>
            {tabsData[activeTab].content.map((ElementItem, index) => (
                    React.cloneElement(ElementItem, {key:index}) 
            ))}
        </div>
    </div>
  )
}

export default Tabs

传入的tabsData示例 #

const tabsData = [
    {
        tabTitle: "Description",
        content: [
            <h1 className={classes.tabTitle}>{'Product Description'}</h1>, 
            productDetails.shortDescription.html 
                ? <RichContent html={productDetails.shortDescription.html} /> 
                : <RichContent html={"<p>No short description found</p>"}/>
        ]
    },
    {
        tabTitle: "Attributes",
        content: [
            <h1 className={classes.tabTitle}>{'Product Attributes'}</h1>, 
            <CustomAttributes customAttributes={customAttributesDetails.list} />
        ]
    }
]

尝试过的无效写法 #

<React.Fragment key={index}>
     { React.cloneElement(ElementItem) }
</React.Fragment>

• 外层遍历tabsData渲染<li>标签时，没有给<li>设置key属性，这是触发警告的首要原因。
• 渲染content区域时直接使用数组索引作为key，切换tab后不同tab下的content元素索引相同但内容完全不同，会出现key冲突，React会判定key设置无效并持续抛出警告。
• React.cloneElement()本身支持通过第二个参数传入key覆盖原始元素的key，API本身没有问题，问题出在key的设置位置遗漏和唯一性不足。

1. 补全外层tab列表的key，优先使用业务唯一标识（比如tabTitle）代替索引作为key，稳定性更高：

<ul className={classes.tabsList}>
    {tabsData.map((item, index) => (
        <li 
            key={item.tabTitle}
            className={`${classes.tab} ${index === activeTab && classes.activeTab}`} 
            onClick={() => setActiveTabIndex(index)}
        >
            {item.tabTitle}
        </li>
    ))}
</ul>

2. 给content区域的元素添加带唯一前缀的key，避免跨tab切换时的索引key冲突，直接通过React.cloneElement传入即可生效：

<div className={classes.textContainer}>
    {tabsData[activeTab].content.map((ElementItem, index) => (
        React.cloneElement(ElementItem, {
            key: `tab-${activeTab}-${index}` // 拼接当前激活tab索引，保证key全局唯一
        }) 
    ))}
</div>

3. 如果不想修改克隆元素本身的key，也可以用Fragment包裹克隆后的元素，将key绑定在map返回的最外层Fragment上，这种写法同样符合React的key规则：

<div className={classes.textContainer}>
    {tabsData[activeTab].content.map((ElementItem, index) => (
        <React.Fragment key={`tab-${activeTab}-${index}`}>
            {React.cloneElement(ElementItem)}
        </React.Fragment>
    ))}
</div>

额外优化：你代码中setActiveTabIndex的依赖数组不需要传入activeTab，setActiveTab是React useState返回的稳定引用，且回调逻辑中没有使用activeTab变量，可以将依赖数组改为空数组，避免不必要的回调重建。

内容的提问来源于stack exchange，提问作者LosMos