在组件reactjs之外更改后如何使用全局语言环境

Posted 2021-04-19

项目结构

src/
  components/
    forms/
      testForm.js
  helpers/
    time.js
  index.js

在time.js文件中，有一个帮助器函数可以创建月份数组

time.js

const getMonth() => {
  return moment.months() // calls before setting locale in index.js with english locale
}

moment.months（）返回当前语言环境中的月份列表。

在索引文件中设置的本地化

index.js

const locale =  getLocalization() // get localization from cookie
moment.locale(locale);

[当项目启动时，它在第一个文件time.js中与语言环境'en'捆绑在一起，然后将index.js文件捆绑在一起，其中将瞬间定位设置为'ru'语言环境。

src / components / forms / testForm.js

import { createMonthList } from "../../helpers/time";

const monthList = createMonthList(); // options are always in English

function TestForm() {
  return (
    <div>
      <h4>List from helpers</h4>
      <ul>
        {monthList.map(month => {
          return <li key={month}>{month}</li>;
        })}
      </ul>
    </div>
  );
}

如何解决？选项应使用在index.js文件中设置的语言，但始终为英语

答案

原因是我在模块中的组件之外创建了月份列表。

[从入口点开始，webpack递归地建立依赖关系该图包含您的应用程序需要的每个模块，然后进行捆绑所有这些模块都分成少量捆绑-通常。

webpack处理完该项目后，将在项目启动时，在将本地化设置为德语之前以及在安装组件TestForm之前执行此行

const monthList = createMonthList(); // used English locations which is used by default

如果在安装组件时调用方法createMonthList，在该阶段，如果设置为德语，它将在本地化后执行

沙盒https://codesandbox.io/s/stack-of-moment-localization-37dj3?file=/src/components/forms/test.js:0-1090

  componentDidMount() {
    this.setState({
      monthList: createMonthList(); // used German locale which is set up in root file
    });
  }

TestForm组件

import React from "react";
import { createMonthList } from "../../helpers/time";


const monthList = createMonthList(); // used English locations which is used by default

class TestForm extends React.Component {
  state = {
    monthList: []
  };

  componentDidMount() {
    this.setState({
      monthList: createMonthList() // used German localiztion which is set up in root file
    });
  }

  render() {
    return (
      <div style={styles.row}>
        <div>
          <h3>Wrong localization</h3>
          <h4>List's created outside of component</h4>
          <ul>
            {monthList.map(month => {
              return <li key={month}>{month}</li>;
            })}
          </ul>
        </div>
        <div>
          <h3>Correct Localization</h3>
          <h4>List's created in component</h4>
          <ul>
            {this.state.monthList.map(month => {
              return <li key={month}>{month}</li>;
            })}
          </ul>
        </div>
      </div>
    );
  }
}