使用 i18next 将变量替换为 ReactNode 元素答案

【问题标题】：Using i18next to replace a variable with a ReactNode element使用 i18next 将变量替换为 ReactNode 元素
【发布时间】：2020-04-14 05:04:18
【问题描述】：

我有一个带有以下翻译的翻译 json 文件：

"pageNotFound": {
  "description": "The page could not be found. Click {{link}} to return to the home page"
},

我想用ReactRouter <Link>替换链接变量

我的render 方法中有以下代码，它输出下图。

public render() {

  const { t } = this.props;
  const message = t('pageNotFound.description', { link: <Link to="/">here</Link> });

  return (
    <div className="body-content">
      <div>
        {message}
      </div>
    </div>
  );
}

我玩过<Trans> 组件，我认为这可能是一种方法，但您似乎必须输入包括标签在内的全文，对于我的用例而言，这不是我想要的如果可能，所有文本都在翻译 json 中。

欢迎任何建议

【问题讨论】：

标签： javascript reactjs typescript internationalization i18next

【解决方案1】：

您应该为此使用Trans 组件。

"pageNotFound": {
  "description": "The page could not be found. Click <0>here</0> to return to the home page"
},

public render() {
  const { t } = this.props;

  return (
    <div className="body-content">
      <div>
        <Trans
          t={t}
          i18nKey="pageNotFound.description"
          components={[
            <Link key={0} to="/">
              here
            </Link>,
          ]}
        />
      </div>
    </div>
  );
}

【讨论】：

辛苦了。谢谢