插入Next.js链接到HTML字符串

Question

我从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，但不确定如何在字符串中插入内容。

你有什么想法可以实现这个吗？

- gkpo

Answer 1

我知道这是一个老问题，但我偶然发现它是一个有趣的问题。

假设API返回的字符串总是"<p>Hello World</p>"，你可以这样做：

const string = '<p>Hello World</p>';
    
const processed = string.replace(/\bWorld\b/, `<Link href="/my-route">$&</Link>`);
    
console.log(processed);

我们正在使用带有正则表达式的.replace方法，将“World”替换为自身被<Link>标签包围。通过在第二个参数中写入$&，.replace允许我们指定字符串作为替换。 < p > .replace文档：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace < /p >

- zbarnz

Answer 2

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

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

- viratasn