Как заменить какой-либо текстовый шаблон пользовательским JSX-компонентом в ReactJS? - PullRequest
Новая
       8

Как заменить какой-либо текстовый шаблон пользовательским JSX-компонентом в ReactJS?

0 голосов
/ 11 ноября 2018

Это все о наличии текстовых строк перевода и их реализации в 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, он позволяет вам перемещаться с маршрутизацией (в настоящее время используется роутер).

1 Ответ

0 голосов
/ 12 ноября 2018

Это довольно легко сделать, если вы рассматриваете свои текстовые шаблоны как Markdown:

  1. Заменить ключевые слова синтаксисом Markdown link ([linked phrase](https://www.example.com/))
  2. Запустите уценку через markdown-to-jsx , чтобы преобразовать ее в JSX
  3. Используйте опцию overrides, чтобы использовать пользовательский компонент с тегами a (например, обертку, которая извлекает href и предоставляет ее как опору to в Gatsby's 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>
...