javascript - 在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;

en-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，如 Dynamically import language json file for react / react-intl 中所述。但我觉得可能有更好、更“ react ”的方式来做到这一点。

有什么建议吗？

编辑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

为什么要尝试将其作为函数返回？

也许您可以用作问候语 ["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?"],
};

可能是这样吗？