堆棧內存溢出
  簡體   English   中英

無法使用 Foreach 渲染鏈接組件 React

[英]Unable to Render Link Component React using Foreach

 原文  2022-05-02 13:24:54  6   1    javascript/ reactjs/ frontend/ higher-order-functions

問題描述

我有一個單詞數組，沒有單詞，我正在嘗試使用數組中的值來構造一個句子，並且只使單詞可以點擊。

下面是數組的示例。 此數據存儲在名為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 組件。 我的代碼可能做錯了什么？

1 個解決方案

解決方案1
 1 已采納  2022-05-02 13:39:48

您不會在 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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 無法在反應中渲染組件 React-Router-DOM：無法在同一頁面（組件）中呈現鏈接 通過單擊 React 中的鏈接來渲染組件 無法在React Component中呈現子項 Storybook：通過單擊鏈接渲染組件（React） 單擊按鈕時無法呈現反應組件 有沒有一種方法可以使用ERB在ERB中渲染React組件 <Component/> ？ React 17：無法在 forEach function 中呈現元素 無法在 React Router Link 組件上設置 HREF 如何使用react-router-dom定向鏈接以呈現填充有prop的常規post組件？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM