如何在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

但"怪异"这个词应该是一个链接元素，而不是。。。

顺便说一句，该组件只是gatsby的一个组件，它允许您使用路由导航(目前使用reach路由器(。

Answer 1

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

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

如果你想要一个更精简的管道，你可以用dangerouslySetInnerHTML把一些东西拼凑在一起，但它不会那么灵活或容易消毒。

示例代码：

import * as React from "react"
import Link from "gatsby"
import Markdown from "markdown-to-jsx"
const MagicText = ({ children, linkUrl }) => (
<Markdown
options={{
overrides: {
replace: Link,
},
}}
>
{children
.replace("[replace]", `<replace to=${linkUrl}>`)
.replace("[/replace]", "</replace>")}
</Markdown>
)

使用中：

<MagicText linkUrl="https://www.example.com/">{phrase}</MagicText>