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

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

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

所以我想使用i18njs文件，这取决于用户调用模块的语言。以下是我当前的文件：

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;

sv-se.js

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

export default Lang;

正如您所看到的，我希望基本上从相应的语言文件中获取问候语，这取决于用户使用哪个语言环境作为属性

我已经试着找到一个很好的方法来做到这一点，我发现的唯一方法是使用中所述的

require

，但我觉得可能有一种更好、更“反应”的方法来做到这一点

有什么建议吗

编辑1:

根据@Ozan Manav的建议，我将语言文件改为使用

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

并使用以下命令调用它：

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

---

但如果可能的话，我仍然希望不必使用

require

。

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

也许你可以用问候语[“en en”]或问候语[“sv SE”]

---

可能是吗？

请参阅我的编辑。我想为每个区域设置不同的文件，因为我将为每个区域设置提供更多的元素。这可能比我上面提到的更好吗？嗯，你是在说这个吗？是的，谢谢，我想知道为什么我在谷歌搜索的时候没有找到它。我可以重写该解决方案以满足我的需要：）

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

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

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