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

Posted 2023-02-22

【中文标题】在 react js (redux) 上设置默认语言

【英文标题】：Setting default language on react js (redux)

【发布时间】：2019-08-02 03:51:20

【问题描述】：

我正在尝试为我的 react redux 应用程序创建一个默认的“en”语言，现在我在商店中插入该语言，但我想使用我的 lang 文件夹中的 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;

【参考方案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>
    );
  
;

【讨论】：

为我工作，你