reactjs - 继续收到错误 MissingTranslationId

Question

Note: This question is exclusively related to the library react-localize-redux but I cannot create a tag for it yet.

我想使用 allLanguages 格式。所以我创建了一个名为 global.json 的 .json 文件，如下所示:

{
    "header": {
        "toggleNavigation": [
            "Cambiar navegación",
            "Toggle navigation"
        ],
        "home": [
            "Inicio",
            "Home"
        ],
        "company": [
            "Compañía",
            "Company"
        ]
    }
}

我决定按如下方式在我的 Root 组件中实现所有内容:

...
import allTranslations from "../translations/global.json";
...

class Root extends Component {

  constructor(props) {
    super(props);

    this.props.initialize({
      languages: [
        { name: "Spanish", code: "es" },
        { name: "English", code: "en" }
      ],
      translation: allTranslations,
      options: {
        renderToStaticMarkup
      }
    });

    this.props.addTranslation(allTranslations); // just to make sure it's loading the json dictionary

    this.props.setActiveLanguage("es"); // Although Spanish was added first in the list of languages, I want to make sure the active language is Spanish
  }

  render() {
    const { store, history } = this.props;
    return (
      <LocalizeProvider>
        <Provider store={store}>
          <ConnectedRouter history={history}>
            <App />
          </ConnectedRouter>
        </Provider>
      </LocalizeProvider>
    );
  }
}

Root.propTypes = {
   ...
};

export default withLocalize(Root);

然后，在名为 Header 的无状态 Controller 中，我想通过库的翻译组件使用本地化。

import React from 'react';
import PropTypes from 'prop-types';
import { Translate } from "react-localize-redux";

const Header = (props) => {

    return (
        <div className="header-container">
...
...
                        <ul className="nav navbar-nav navbar-right">
                            <li className="menu-item"> 
                               <a href="#one-page-home">
                                    <Translate id="header.home" />
                                </a> 
                            </li>
                        </ul>
...
...
        </div>
    );
};

Header.propTypes = {
    ...
};

export default Header;

我收到错误:Missing TranslationId: header.home for language: ${ languagecode }

我已经按照文档进行操作，但我不知道自己做错了什么。

有什么帮助吗？这个伟大图书馆的更精通的用户第一眼就能看出有什么问题吗？

react 版本 16.4.2 和 react-localize-redux 版本 3.4.1

Answer 1

也许，至少是我的情况，我没有用 <LocalizeProvider> 包裹整个渲染

ReactDom.render(
<Provider store={store}>
    <LocalizeProvider initialize={{
        languages: [
        { name: "English", code: "en" },
        { name: "Spanish", code: "es" }
        ],
        translation: { home: ['hello', 'alo'] },
        options: {
        defaultLanguage: "en",
            renderToStaticMarkup: renderToStaticMarkup
        }
    }}>
        <BrowserRouter>
            <Switch>
            <Route exact path="/login" children={(props) => <Login {...props} /> } />
            <Route exact path="/dashboard" children={(props) => <Dashboard {...props} /> } />
            <Route exact path="/" children={(props) => <Home {...props} />} />
            </Switch>
        </BrowserRouter>
    </LocalizeProvider>
</Provider>, document.getElementById('root')
);

取而代之的是:

ReactDom.render(
<Provider store={store}>
    <LocalizeProvider initialize={{
        languages: [
        { name: "English", code: "en" },
        { name: "Spanish", code: "es" }
        ],
        translation: { home: ['hello', 'alo'] },
        options: {
        defaultLanguage: "en",
            renderToStaticMarkup: renderToStaticMarkup
        }
    }}>
        <BrowserRouter>
            <Switch>
            <Route exact path="/login" children={(props) => <Login {...props} /> } />
            <Route exact path="/dashboard" children={(props) => <Dashboard {...props} /> } />
            <Route exact path="/" children={(props) => <Home {...props} />} />
            </Switch>
        </BrowserRouter>
    </LocalizeProvider>
</Provider>, document.getElementById('root')
);