我读过其他可用的答案,但无法理解它。我真的不知道在这种情况下该把 key 插入哪里
const recursivelyMapChildren = (node, index) => {
return (
node.children.map((child, i) => {
if (child.text) return child.text
const tag = child.tag
return React.createElement(
tag,
{
key: `${tag}-${index}-${i}`,
className: `text-block-${tag}`,
...child.attributes,
},
recursivelyMapChildren(child, index + 1)
)
})
)
}
const STTextBlock = ({ data }) => {
const textTag = data.content[0].tag
return (
<div className="text-block">
{
data.content.map(textBlock =>
React.createElement(
textTag,
{
className: `${textTag}`,
},
recursivelyMapChildren(textBlock)
)
)
}
<style jsx>{styles}</style>
</div>
)
}
如有任何帮助,我们将不胜感激!
最佳答案
您需要向初始数组映射添加一个键,另请参阅我添加UNIQUE_KEY_NEEDED_HERE_ALSO
的位置。
const recursivelyMapChildren = (node, index) => {
return (
node.children.map((child, i) => {
if (child.text) return child.text
const tag = child.tag
return React.createElement(
tag,
{
key: `${tag}-${index}-${i}`,
className: `text-block-${tag}`,
...child.attributes,
},
recursivelyMapChildren(child, index + 1)
)
})
)
}
const STTextBlock = ({ data }) => {
const textTag = data.content[0].tag
return (
<div className="text-block">
{
data.content.map(textBlock =>
React.createElement(
textTag,
{
key: `UNIQUE_KEY_NEEDED_HERE_ALSO`
className: `${textTag}`,
},
recursivelyMapChildren(textBlock)
)
)
}
<style jsx>{styles}</style>
</div>
)
}
关于javascript - 数组或迭代器中的每个子级都应该有一个唯一的 "key"属性。 react JS 错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45614848/