React NextJs将Link作为组件添加到字符串中

Question

我需要以编程方式构建nextJs链接。一个简单的例子:

const link = <Link href={'/example'}>ipsum</Link>
const text = 'Lorem ipsum dolor sit amet'
const replaced = text.replaceAll('ipsum', link);

但是结果是:

Lorem [object Object] dolor sit amet

如何在不破坏react组件的情况下用link组件替换字符串?谢谢你

Answer 1

在字符串中连接组件将导致显示[object Object]，因为该组件最终是一个对象，并且将被强制转换成字符串以适合。

在react中实现目标的方法是使用数组。

const link = <Link href={'/example'}>ipsum</Link>
const text = 'Lorem ipsum dolor sit amet'
const res = text.split(" ").reduce((acc, curr) => {
if (curr === "ipsum") {
return [...acc, link];
}
return [...acc, ` ${curr} `];
}, []);
return <>{res}</>

该片段将按照您的期望显示对象数组。