NextJS/JSX：如何在不使用危險的SetInnerHTML 的情況下插入動態生成的 JSX？

Question

考慮一個字符串“Foo #bar baz #fuzz”。 我想在 NextJS 中顯示一個“標題”組件，其中的主題標簽是超鏈接。

我目前的做法是：

import Link from "next/link";

  const handleHashTag = str =>
    str
      .split(" ")
      .map(el => {
        const r = /(.*)(#[^ ]*)/;
        const matched = el.match(r);
        if (matched)
          return `<span>${matched[1]}</span><Link href="${matched[2]}"><a>${matched[2]}</a></Link>`;
        return el;
      })
      .join(" ");

function Caption(catption) {
  const linkedCaption = handleHashtag(caption)
  return <div dangerouslySetInnerHTML={__html: }>
}

對應的 HTML 有空的span標簽代替<Link> 。 這種方法確實依賴於危險的SetInnerHTML。 有沒有辦法在不使用dangerouslySetInnerHTML <Link>情況下實現<Link>的功能？

Answer 1

如果有匹配項，則返回一個組件，而不是字符串（基本上沒有反引號和美元），並且不加入數組而是使用 jsx 中的 map 渲染其中的元素

Answer 2

像react-hashtag這樣的解決方案解決了這個問題。 您可以使用自定義的 Link 組件，而不是使用react-router作為其源，在這種情況next/link 。