我如何在 ReactJS 中用自定义 JSX 组件替换一些文本模板?
How do i replace some text template with a custom JSX Component in ReactJS?
这就是关于翻译文本字符串并在 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] link
这个很好用,只使用普通的 html 标签
<p dangerouslySetInnerHTML={{
__html: phrase.replace(/\[replace\](.*)\[\/replace\]/, "<b></b")
}}>
</p>
输出是:这只是一个字符串,里面有一些奇怪 link
我也试过以下方法:
<p dangerouslySetInnerHTML={{
__html: phrase.replace(/\[replace\](.*)\[\/replace\]/, "<Link to=\""+linkurl+"\"></Link>")
}}>
</p>
输出为:this is just a string with some weird link inside
但是单词 'weird' 应该是一个 link 元素,但它不是...
顺便说一句,该组件只是 gatsby 的一个组件,它允许您使用路由进行导航(目前使用到达路由器)。
如果您将文本模板视为 Markdown,这很容易做到:
- 用 Markdown link 语法替换关键字 (
[linked phrase](https://www.example.com/)
)
- 运行 markdown 通过 markdown-to-jsx 将其转换为 JSX
- 使用
overrides
选项来使用带有 a
标签的自定义组件(例如,提取 href
并将其作为 Gatsby 的 to
属性提供的包装器Link
).
如果你想要一个更精简的管道,你可以用 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>
这就是关于翻译文本字符串并在 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] link
这个很好用,只使用普通的 html 标签
<p dangerouslySetInnerHTML={{
__html: phrase.replace(/\[replace\](.*)\[\/replace\]/, "<b></b")
}}>
</p>
输出是:这只是一个字符串,里面有一些奇怪 link
我也试过以下方法:
<p dangerouslySetInnerHTML={{
__html: phrase.replace(/\[replace\](.*)\[\/replace\]/, "<Link to=\""+linkurl+"\"></Link>")
}}>
</p>
输出为:this is just a string with some weird link inside
但是单词 'weird' 应该是一个 link 元素,但它不是...
顺便说一句,该组件只是 gatsby 的一个组件,它允许您使用路由进行导航(目前使用到达路由器)。
如果您将文本模板视为 Markdown,这很容易做到:
- 用 Markdown link 语法替换关键字 (
[linked phrase](https://www.example.com/)
) - 运行 markdown 通过 markdown-to-jsx 将其转换为 JSX
- 使用
overrides
选项来使用带有a
标签的自定义组件(例如,提取href
并将其作为 Gatsby 的to
属性提供的包装器Link
).
如果你想要一个更精简的管道,你可以用 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>