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>标签。这种方法确实依赖危险地设置内部HTML。有没有一种方法可以在不使用<Link>的情况下实现dangerouslySetInnerHTML的功能？

Answer 1

如果存在匹配项，则返回一个组件，而不是字符串（基本上没有反引号和美元），并且不加入数组，而是使用jsx中的map渲染其中的元素

Answer 2

诸如react-hashtag之类的解决方案可以解决此问题。您可以使用自定义的Link组件（在这种情况下为react-router）来代替其来源使用next/link。

NextJS / JSX：如何在不使用dragonallySetInnerHTML的情况下插入动态生成的JSX？

2 个答案: