react-i18next：字符串没有被翻译答案

【问题标题】：react-i18next: strings not being translatedreact-i18next：字符串没有被翻译
【发布时间】：2020-04-09 01:54:16
【问题描述】：

我对 react-i18next 库有一个令人沮丧的问题。我只是无法让库翻译我的应用程序中的字符串。

代码如下：

App.tsx：

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

import resources from './resources';

// code omitted...

i18n
  .use(initReactI18next)
  .init({
    resources,
    lng: 'en',
    interpolation: {
      escapeValue: false,
    },
  });

// rest of the code here...

资源/index.tsx：

export default {
  en: {
    'Math Visualized': 'Math Visualized asd',
  },
  fi: {
    'Math Visualized': 'Matematiikan visualisointia',
  },
};

components/header/Header.tsx:

import { withTranslation } from 'react-i18next';

// code omitted...

class HeaderComponent extends React.Component<Props, State> {
  render() {
    const { headerText, subheaderText, t } = this.props;

    // react-bootstrap used here
    return (
      <Navbar bg="dark" variant="dark">
        <Navbar.Brand>{t(headerText)}</Navbar.Brand>
        {subheaderText && <Navbar.Text>{t(subheaderText)}</Navbar.Text>}
      </Navbar>
    );
  }
}

export const Header = withTranslation()(HeaderComponent);

只是拒绝翻译标题和子标题文本字符串。

【问题讨论】：

标签： reactjs typescript i18next react-i18next

【解决方案1】：

我只是忘记将translation 命名空间添加到资源文件中。我是这样修改的：

export default {
  en: {
    translation: { // THIS NAMESPACE HERE WAS MISSING
      'Math Visualized': 'Math Visualized asd',
    },
  },
  fi: {
    translation: {
      'Math Visualized': 'Matematiikan visualisointia',
    },
  },
};

一切正常。

【讨论】：