时间戳

首页 > 解决方案 > 如何在 ReactJS 中用自定义 JSX 组件替换一些文本模板？

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

问题描述

这完全是关于拥有翻译文本字符串并在 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 的一个组件，它允许您使用路由导航（当前使用到达路由器）。

标签： stringreactjsjsxgatsbytemplate-strings

解决方案

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

  1. [linked phrase](https://www.example.com/)用 Markdown 链接语法 ( )替换关键字
  2. 通过markdown-to-jsx运行 markdown以将其转换为 JSX
  3. 使用overrides选项来使用带有a标签的自定义组件（例如，提取href并将其作为toGatsby 上的道具提供的包装器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>

推荐阅读