javascript 我创建的返回元素的自定义函数< span>得到“警告：列表中的每个孩子都应该有一个唯一的“关键” prop ”

scyqe7ek 于 2023-02-02 发布在 Java

关注(0)|答案(2)|浏览(100)

我正在尝试创建一个函数，该函数接受一个单词数组，例如：

const words = ['hello', 'my', 'name']

并以以下格式返回它们：

<>
<span>hello</span> // <span>my</span> // <span>name</span>
</>

这是我创建的react组件：

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

然后这样称呼它：

<div><StyledWords words={['hello', 'my', 'name']} /></div>

现在这个确实起作用了，但是我得到了关于钥匙的警告。所以我的想法是要么我做得不恰当，要么我错过了钥匙的一些东西。有什么帮助吗？

JavaScript

来源：https://stackoverflow.com/questions/75313259/custom-function-i-made-that-returns-span-elements-is-getting-warning-each-ch

2条答案

按热度按时间

vq8itlhq1#

您需要为组件提供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>
            } 
        })
    )
}

正如Lokesh所建议的，如果不能保证key是唯一的，则应该使用key作为项的唯一值，而不是使用word。

赞(0）回复(0）举报 2023-02-02

a1o7rhls2#

其他一些优化：

function StyleWords({words, ...props}){
    return(
        words.map((word) => {
            return <span key={word} className='highlight'>{word}</span>)
        }
    )
}

1.顶级元素需要键属性。
1.如果只使用一个元素，则不需要片段。
1.不需要words.map((word, index, words)。

赞(0）回复(0）举报 2023-02-02

我来回答

javascript 我创建的返回元素的自定义函数< span>得到“警告：列表中的每个孩子都应该有一个唯一的“关键” prop ”

2条答案

相关问题

热门标签

最新问答