如何使用 react-i18next <Trans> 命名标签？答案

【问题标题】：How do I use the react-i18next <Trans> named tags?如何使用 react-i18next <Trans> 命名标签？
【发布时间】：2020-09-20 17:02:58
【问题描述】：

我正在尝试实现here 中描述的 Trans 标记格式。但是，每当我尝试几乎逐字复制示例时，结果是标签名称出现在页面上，而内部内容却没有。

这是my sample project的链接。

谢谢！

【问题讨论】：

标签： i18next react-i18next

【解决方案1】：

注意Trans组件接受一个object作为componentsprop。

在您的示例中，您传递了一个 字符串。

class App extends Component {
  render() {
    const { t, i18n } = this.props;
    const changeLanguage = (lng) => {
      i18n.changeLanguage(lng);
    };
    return (
      <div className="App">
        <div className="App-header">
          <h2>{t("Welcome to React")}</h2>
          <button onClick={() => changeLanguage("de")}>de</button>
          <button onClick={() => changeLanguage("en")}>en</button>
        </div>
        <Trans
          i18nKey="userMessagesUnread"
          values={{ name: "Greg", count: "30" }}
          components={{ bold: <strong />, italic: <i /> }}
          // --------^
        ></Trans>
      </div>
    );
  }
}

一个工作的example

【讨论】：

另请注意，在@vball 示例中，使用的是不支持的旧版本 18next
它确实支持接受数组的组件道具。检查文档