React自定义返回<span>元素的组件触发‘唯一key属性’警告，求排查解决

你的问题出在返回Fragment的那部分没有设置key。当你在map里返回<><span key={word}>...</span> // </>时，这个Fragment是列表的直接子元素，React要求列表的每个直接子节点都必须有唯一的key，而你把key加在了Fragment内部的span上，这不符合React的key校验规则。

修复方案1：给Fragment添加key #

短语法的<>不支持设置key，必须使用完整的<React.Fragment>来指定key：

function StyleWords({words, ...props}){
    return(
        words.map((word, index, words) => {
            if(index !== words.length-1){
                return (
                    <React.Fragment key={word}>
                        <span className='highlight'>{word}</span> // 
                    </React.Fragment>
                )
            }
            else{
                return <span key={word} className='highlight'>{word}</span>
            } 
        })
    )
}

修复方案2：统一用容器包裹内容与分隔符 #

可以用一个容器元素把单词和分隔符包起来，直接给容器加key，结构更简洁：

function StyleWords({words, ...props}){
    return(
        words.map((word, index) => {
            const isLast = index === words.length - 1;
            return (
                <span key={word}>
                    <span className='highlight'>{word}</span>
                    {!isLast && ' // '}
                </span>
            )
        })
    )
}

额外注意 #

如果你的单词数组存在重复值，用word作为key会触发新的重复key警告。这种情况下：

• 若数组不会被重新排序、添加/删除元素，可以临时用index作为key；
• 更稳妥的方式是给每个单词绑定一个唯一ID（比如传入[{id: 1, word: 'hello'}, ...]格式的数组），用id作为key。

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