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;

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

我试图找到一种好的方法，而我发现的唯一方法是使用Dynamically import language json file for react / react-intl中所述的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。

Answer 1

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

也许您可以用作Greetings [“ en-EN”]或Greetings [“ 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

1 个答案: