无法使用Foreach渲染链接组件React

Question

我有一个单词数组，没有单词，我试图使用数组内的值构建一个句子，并使只有单词可以点击。

下面是数组的一个示例。此数据存储在constgetWordsFromTokens中

[
{
"type": "non-word",
"value": ""
},
{
"type": "word",
"value": "One"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "Saturday"
},
{
"type": "non-word",
"value": ", "
},
{
"type": "word",
"value": "when"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "I"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "was"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "young"
},
{
"type": "non-word",
"value": ", "
},
{
"type": "word",
"value": "my"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "father"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "and"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "I"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "left"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "the"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "house"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "early"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "in"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "the"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "morning"
},
{
"type": "non-word",
"value": ", "
},
{
"type": "word",
"value": "when"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "it"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "was"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "still"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "blue"
},
{
"type": "non-word",
"value": "-"
},
{
"type": "word",
"value": "black"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "outside"
},
{
"type": "non-word",
"value": ". "
},
{
"type": "word",
"value": "The"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "grass"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "left"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "wet"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "marks"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "on"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "our"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "shoes"
},
{
"type": "non-word",
"value": ". "
},
{
"type": "word",
"value": "In"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "the"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "backyard"
},
{
"type": "non-word",
"value": ", "
},
{
"type": "word",
"value": "under"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "stones"
},
{
"type": "non-word",
"value": ", "
},
{
"type": "word",
"value": "we"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "dug"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "up"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "crawly"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "worms"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "and"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "laid"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "them"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "in"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "a"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "can"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "with"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "lumps"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "of"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "damp"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "dirt"
}
]

这是我如何试图构建句子，并使只有单词可点击

getWordsFromTokens.forEach(item => {
const htmlToAppend = item.type === 'word' ?
// `<a href='/word/${item.value}'>${item.value}</a>` :
<Link to="user" params={item.value} >{item.value}</Link>:
item.value

document.getElementById('new-sentence').innerHTML += htmlToAppend;
})

在浏览器上呈现的内容是这样的，而不是文本

' '对象对象(对象对象),[对象对象][对象对象][对象对象][对象对象],[对象对象][对象对象][对象对象][对象对象][对象对象][对象对象][对象对象][对象对象][对象对象][对象对象][对象对象],[对象对象][对象对象][对象对象][对象对象][对象对象]-[对象对象][对象对象]。[对象对象][对象对象][对象对象][对象对象][对象对象][对象对象][对象对象][对象对象][对象对象][对象对象][对象对象]。[object object] [object object] [object object] [object object] [object object] [object object] [object object] [object object] [object object] [object object] [object object] [object object] [object object] [object object] [object object] [object object] [object object] [object object] [object object] [object object] [object object] [object object] [object object] [object object] [object object] [object object] [object object] [object object] [object object] [object object] [object object] [object object] [object object] [object object] [object object] [object object] [object object] [object object] [object object] [object object] [object object] [object object] [object object][object object] [object object]， [object object] [object object] [object object] [object object] [object object] [object

"

当我使用anchant标签时，它可以工作，但我想使用Link组件。我在代码中可能做错了什么?

Answer 1

在react中不使用forEach，因为这是一种命令式方法，在JSX中不起作用。使用map创建JSX值的数组，并将其作为JSX代码返回。

const elems = [
{
"type": "non-word",
"value": ""
},
{
"type": "word",
"value": "One"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "Saturday"
},
{
"type": "non-word",
"value": ", "
},
{
"type": "word",
"value": "when"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "I"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "was"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "young"
},
{
"type": "non-word",
"value": ", "
},
{
"type": "word",
"value": "my"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "father"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "and"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "I"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "left"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "the"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "house"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "early"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "in"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "the"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "morning"
},
{
"type": "non-word",
"value": ", "
},
{
"type": "word",
"value": "when"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "it"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "was"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "still"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "blue"
},
{
"type": "non-word",
"value": "-"
},
{
"type": "word",
"value": "black"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "outside"
},
{
"type": "non-word",
"value": ". "
},
{
"type": "word",
"value": "The"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "grass"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "left"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "wet"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "marks"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "on"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "our"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "shoes"
},
{
"type": "non-word",
"value": ". "
},
{
"type": "word",
"value": "In"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "the"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "backyard"
},
{
"type": "non-word",
"value": ", "
},
{
"type": "word",
"value": "under"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "stones"
},
{
"type": "non-word",
"value": ", "
},
{
"type": "word",
"value": "we"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "dug"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "up"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "crawly"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "worms"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "and"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "laid"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "them"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "in"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "a"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "can"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "with"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "lumps"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "of"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "damp"
},
{
"type": "non-word",
"value": " "
},
{
"type": "word",
"value": "dirt"
}
]
const Words = () => {
return (<p>{elems.map(el => el.type === "word" ? (<a href={"/"+el.value}>{el.value}</a>) : el.value)}</p>)
}
ReactDOM.render(<Words />, document.getElementById("root"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>