时间戳

首页 > 解决方案 > 不断收到错误 MissingTranslationId

reactjs - 不断收到错误 MissingTranslationId

问题描述

注意：这个问题只与图书馆有关， react-localize-redux但我还不能为它创建标签。

我想使用 allLanguages 格式。所以我创建了一个名为 .json 的文件global.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 的无状态控制器中，我想通过库的 Translate 组件使用本地化。

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

标签： reactjslocalization

解决方案

也许，至少是我的情况，我没有用<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')
);

推荐阅读