如何在ReactJS中用自定义JSX组件替换某些文本模板？

Question

这全部涉及拥有翻译文本字符串并在JSX中实现它们。

让我们说我有两个字符串。一个用于英语，另一个用于西班牙语，例如：

英语

const phrase = `this is just a string with some [replace]weird[/replace] link inside`

西班牙语

const phrase = `esto es solo un string con un [replace]raro[/replace] enlace dentro`

当我处于英语模式时，字符串当然是第一个例子。

我正在尝试用这样的组件替换[/ replace]中的[replace]字。

<p dangerouslySetInnerHTML={{
    __html: phrase.replace(/\[replace\](.*)\[\/replace\]/, <Link to={linkurl} >test</Link>)
}}>

输出为：这只是一个带有[object Object]链接的字符串

仅使用简单的html标签，这可以正常工作

<p dangerouslySetInnerHTML={{
    __html: phrase.replace(/\[replace\](.*)\[\/replace\]/, "<b>$1</b")
  }}>
</p>

输出为：这只是一个带有一些奇怪链接的字符串

我也尝试了以下方法：

<p dangerouslySetInnerHTML={{
    __html: phrase.replace(/\[replace\](.*)\[\/replace\]/, "<Link to=\""+linkurl+"\">$1</Link>")
  }}>
</p>

输出为：this is just a string with some weird link inside

但单词'weird'应该是链接元素，而不是...

通过该组件只是gatsby的组件，它使您可以使用路由进行导航（当前使用到达路由器）。

Answer 1

如果将文本模板视为Markdown，这很容易做到：

1. 使用Markdown链接语法（[linked phrase](https://www.example.com/)）替换关键字
2. 通过markdown-to-jsx运行markdown以将其转换为JSX
3. 使用overrides选项可以使用带有a标签的自定义组件（例如，包装器提取href并将其作为Gatsby的{{ 1}}）。

如果您希望使用更精简的管道，可以将to拼凑起来，但是它不那么灵活或易于消毒。

示例代码：

Link

正在使用：

dangerouslySetInnerHTML