如何在.map()方法中为React函数式组件传递key属性？

嘿，我太懂这个坑了！很多刚接触React的朋友都会在key属性上栽跟头，你遇到的情况其实是React的一个核心规则：key必须直接传递给.map()循环里渲染的那个组件实例，而不是在子组件内部设置。

为什么你之前在FunctionalComponent里写的key没用呢？因为React的diff算法只会识别map循环返回的顶层元素上的key，子组件内部的div上的key对列表的唯一性标识完全不起作用——React根本不会去看那里的key。

给你整理一套正确的做法：

第一步：简化子组件，去掉内部的key逻辑 #

子组件只需要专注于接收props并渲染内容，key的事情交给父组件处理：

export default function FunctionalComponent({ title }) {
    // 这里不需要处理key，我们把key的逻辑移到父组件的map里
    return <div>{title}</div>;
}

第二步：在父组件的.map()循环中给子组件绑定key #

这才是key应该待的地方！在循环渲染FunctionalComponent的时候，直接把key作为props传递给它：

export default function ParentComponent({ bigTitle, titles }) {
    const parentDashedTitle = bigTitle.split(' ').join('-');

    return (
        <>
            {titles.map(title => {
                const dashedTitle = title.split(' ').join('-');
                // 关键：在这里给每个FunctionalComponent实例加上唯一的key
                return (
                    <FunctionalComponent
                        key={`${dashedTitle}-in-${parentDashedTitle}`}
                        title={title}
                    />
                );
            })}
        </>
    );
}

补充说明：关于key的唯一性 #

只要key在当前兄弟组件中是唯一的就足够了，不需要全局唯一。你用${dashedTitle}-in-${parentDashedTitle}这种组合来生成key是很靠谱的，能有效区分不同父组件下的子元素，避免重复。

这样修改之后，React的控制台应该就不会再弹出那个“缺少key prop”的警告啦！

备注：内容来源于stack exchange，提问作者artemkhi