使用 i18next 將變量替換為 ReactNode 元素

Question

我有一個翻譯 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 中。

歡迎任何建議

Answer 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>
  );
}