在 react js (redux) 上设置默认语言

Question

我正在尝试为我的 React redux 应用程序创建默认的 'en' 语言，现在我在商店中插入该语言，但我想在我的语言中使用 en.json 文件文件夹，然后在语言之间切换。

ConfigStore.js

import { ReduceStore } from 'flux/utils';
import ActionTypes from '../constants/AppConstants';
import AppDispatcher from '../dispatcher/AppDispatcher';
import config from '../../config';


class ConfigStore extends ReduceStore {

    getInitialState() {
        return {
            language: 'en',
            languageLabels: {}
        };
    }

    reduce(state, action) {
        switch (action.type) {
            case ActionTypes.LANGUAGE_REQUEST:
                var newState = Object.assign({}, state);
                newState.languageLabels = action.data;
                return newState;
            default:
                return state;
        }
    }
}

export default new ConfigStore(AppDispatcher);

App.js

    import React from "react";
    import { render } from "react-dom";
    import { BrowserRouter as Router, Route } from "react-router-dom";
    import Main from "./components/Main";
    import ErrorBoundary from "./components/ErrorBoundary";

    render(
        <Router>
            <ErrorBoundary>
                <div>
                    <Route path="/" component={ Main }/>
                </div>
            </ErrorBoundary>
        </Router>,
        document.getElementById("root")
    );

config.js

这是我有默认设置的文件

const config = {
ServiceConfig: {
    url: 'http://192.168.30.145',
    port: '4000',
    ip: '127.0.0.1'
},

AppConfig: {
    appID: 'wsTrader',
    appName: 42,
    isManager: 0,
    key: '!@#TempKey',
    phoneLine: '0'
},

SiteConfig: {
    defaultLanguage: 'en'
}
};

module.exports = config;

Answer 1

您可以使用名为 helmet 的包来处理此问题：

import { Helmet } from 'react-helmet';

然后在你的渲染方法中，你可以有这样的东西：

class Application extends React.Component {
  render () {
    return (
        <div className="application">
            <Helmet htmlAttributes={{ lang: some.language.from.redux.store }}>
                <meta charSet="utf-8" />
                <title>My Title</title>
            </Helmet>
            ...
        </div>
    );
  }
};

在 react js (redux) 上设置默认语言

Setting default language on react js (redux)

javascript

flux

reactjs

redux

react-redux