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

问题描述

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

这里是指向my sample project的链接。

谢谢！

解决方法

请注意以下事实：Trans组件接受对象作为components道具。

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

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