将 Next.js 链接插入 html 字符串

Posted 2023-02-22

【中文标题】将 Next.js 链接插入 html 字符串

【英文标题】：Inserting Next.js Links into an html string

【发布时间】：2021-03-13 08:53:16

【问题描述】：

我有一个从 API 检索到的 html 字符串。

const htmlString = "<p>Hello World</p>";

我正在使用 react 的 dangerouslySetInnerHTML 在我的页面上显示该内容。

现在在显示它之前，我想对其进行处理并在“World”上放置一个链接。但不是<a> 标签。我需要一个实际的 Next.js <Link> 标签。所以字符串替换可能无法完成这项工作。

我想在jsx中实现的结果是：

const processed = <p>Hello <Link href="/my-route"><a>World</a></Link></p>

我曾想过使用 React.createElement 但我不确定如何在字符串中插入内容。

有什么想法可以实现吗？

【参考方案1】：

Hello<Link href="https://github.com">World</Link>

您不需要在链接中指定另一个锚标记。这应该可以正常工作。