在字符串中使用 react 组件来实现 react-intl-universal

Question

尝试在 i18n 字符串中使用 Link，但它无法正确读取 Link 组件。如何在 react-intl-universal(通用(中包含 react 组件？

语言 JSON 文件

{
"somekey": "some<Link to={ link } somewhere </Link>"
}

JavaScript

import { Link } from 'react-router'
<Fragment>{ intl.getHTML('somekey', { link: `/somewhere` }) }</Fragment>

Answer 1

你不能在 react-inttl-universal getHTML(( 方法中传递组件。调用此方法时，react-intl-universal 会创建一个 span 元素并设置其内部 HTML。因此，使用 intl.getHTML(( 返回的翻译只是一个 HTML 字符串，而不是将通过 react 翻译成 HTML 的组件。

您应该将翻译分为两部分，并写如下内容：

import { Link } from 'react-router'
<Fragment>
{intl.get('contentBeforeLink')}
<Link to="/somewhere">
{intl.get('contentInsideLink')}
</Link>
</Fragment>