无法使用 Foreach 呈现 Link 组件 React

Question

我有一个单词数组和 none 个单词，我正在尝试使用数组中的值来构造一个句子，并只使单词可以点击。

下面是数组的示例。此数据存储在名为 getWordsFromTokens

的常量中

[
  {
    "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;
      })

在浏览器上呈现的是看起来像这样的东西，而不是文本

`` [对象对象] [对象对象] [对象对象] [对象对象] [对象对象] [对象对象] [对象对象] [对象对象] [对象对象] [对象对象] [对象对象] [对象对象] [对象对象] [对象对象] [对象对象] [对象对象] [对象对象], [对象对象] [对象对象] [对象对象] [对象对象] [对象对象]-[对象对象] [对象对象] . [对象对象] [对象对象] [对象对象] [对象对象] [对象对象] [对象对象] [对象对象] [对象对象]。 [对象对象] [对象对象] [对象对象], [对象对象] [对象对象], [对象对象] [对象对象] [对象对象] [对象对象] [对象对象] [对象对象] [对象对象] [对象对象] [对象对象] [对象对象] [对象对象] [对象对象] [对象对象] [对象对象] [对象对象] [对象对象].[对象对象] [对象对象], [对象对象] [对象对象] [对象对象] [对象

``

当我使用 anchot 标签时，它可以工作，但我想使用 Link 组件。我的代码可能做错了什么？

Answer 1

您不要在 React 中使用 forEach，因为这是一种在 JSX 中不起作用的命令式方法。使用 map 创建一个 JSX 值数组，return 它作为 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>

无法使用 Foreach 呈现 Link 组件 React

Unable to Render Link Component React using Foreach

javascript

frontend

higher-order-functions

reactjs