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

Question

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

谢谢！

Answer 1

注意 Trans 组件接受 object 作为 components prop.

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

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

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

How do I use the react-i18next <Trans> named tags?

i18next

react-i18next