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

Question

我需要以编程方式构建 nextJs links。一个简单的例子：

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]，因为最终该组件是一个对象，并将被强制转换为字符串以适合。

为了实现您的目标，可以使用数组代替。

  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}</>

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

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

React NextJs Add Link as componenet into a string

next.js