Question

注意：：该问题与图书馆完全相关 react-localize-redux，但我还不能为其创建标签。

我想使用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的无状态控制器中，我想通过库的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

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')
);

不断收到错误MissingTranslationId

1 个答案: