在 React 组件中动态使用 [lng].js

Question

我正在为 React 创建一个节点模块，只是为了尝试一下并了解更多信息。但是我遇到了一个问题。我想让这个模块没有任何依赖项（React 除外），但我也想在我的模块中使用 I18n。我开始喜欢这个文件结构：

src
|- Components
|  |- myComponent.jsx
|
|- I18n
|  |- en-us.js
|  |- sv-se.js
|
|- index.jsx

所以我想根据用户调用模块的语言来使用I18n js文件。这是我当前的文件：

index.jsx:

import React from 'react';

import Component from './Components/component';

class MyNewModule extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      greetings: [],
    };
  }

  componentDidMount() {
    this.setState({ greetings: [
      'Hola',
      'Como estas?',
      'Como te llamas?',
    ] }); // Will use props later so user can send to module
  }

  render() {
    return (
      <Component greetings={this.state.greetings} locale={this.props.locale} />
    );
  }
}

export default MyNewModule;

myComponent.jsx:

import React from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      greetings: [],
    };

    this.getGreetings = this.getGreetings.bind(this);
  }

  componentDidMount() {
    this.getGreetings();
  }

  getGreetings() {
    let greetings;

    if (props.greetings && props.greetings.length) {
      greetings = props.greetings;
    } else {
      greetings = []; // HERE I WANT TO FETCH GREETINGS FROM FILE BY props.locale
    }

    this.setState({ greetings });
  }

  render() {
    return (
      <div>
        {this.state.greetings.map((g, i) => {
          return (
            <div key={i}>
              {g}
            </div>
          );
        })}
      </div>
    );
  }
}

export default MyComponent;

zh-us.js:

function Lang() {
  return {
    greetings: [
      'Hello',
      'How are you?',
      'What is your name?',
    ],
  };
}

export default Lang;

sv-se.js

function Lang() {
  return {
    greetings: [
      'Hej',
      'Hur mår du?',
      'Vad heter du?',
    ],
  };
}

export default Lang;

如您所见，我基本上想从相应的语言文件中获取问候语，具体取决于用户使用的语言环境属性。

我已经尝试找到一个很好的方法来做到这一点，我找到的唯一方法是使用 require，如所述，但我觉得可能会有更好的方法"reacty" 方法。

有什么建议吗？

编辑 1：

根据@Ozan Manav 的建议，我更改了要使用的语言文件

function Lang() {
  greetings: [
    'Hello',
    'How are you?',
    'What is your name?',
  ],
}

并使用以下方式调用它：

greetings = require(`./I18n/${this.props.locale}.js`).Lang.greetings;

但如果可能，我仍然希望不必使用 require。

Answer 1

你为什么要 return 它作为一个函数？

或许您可以使用问候语 ["en-EN"] 或问候语 ["sv-SE"]

export const Greetings = {
     "en-EN": ["Hello", "How are you?", "What is your name?"],
     "sv-SE": ["Hej", "Hur mår du?", "Vad heter du?"],
};

难道是？

在 React 组件中动态使用 [lng].js

Dynamically use [lng].js in React component

javascript

internationalization

reactjs