[英]Dynamically use [lng].js in React component
I'm creating a node module for React just to try myself out and learn more.我正在为 React 创建一个节点模块,只是为了尝试自己并了解更多信息。 But I'm facing a problem.但我面临一个问题。 I want to make this module without any dependencies (except React) but I also want to have I18n in my module.我想让这个模块没有任何依赖项(React 除外),但我也想在我的模块中包含 I18n。 I have started out like with this file structure:我开始喜欢这个文件结构:
src
|- Components
| |- myComponent.jsx
|
|- I18n
| |- en-us.js
| |- sv-se.js
|
|- index.jsx
So I want to use the I18n js files depending on which language the user calls to the module.所以我想根据用户调用模块的语言来使用 I18n js 文件。 Here are my current files:这是我当前的文件:
index.jsx: 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:我的组件.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: zh-cn.js:
function Lang() {
return {
greetings: [
'Hello',
'How are you?',
'What is your name?',
],
};
}
export default Lang;
sv-se.js sv-se.js
function Lang() {
return {
greetings: [
'Hej',
'Hur mår du?',
'Vad heter du?',
],
};
}
export default Lang;
As you can see I want to basically fetch the greetings from the corrent language file, depending on which locale the user use as property.如您所见,我想基本上从正确的语言文件中获取问候语,具体取决于用户用作属性的语言环境。
I have tried finding a good way to do this, and the only way I have found is to use require
as stated in Dynamically import language json file for react / react-intl but I feel that there might be a better and more "reacty" way to do this.我已经尝试找到一个好的方法来做到这一点,我发现的唯一方法是使用require
,如动态导入语言 json 文件中所述用于 react / react-intl但我觉得可能会有更好和更“反应”方法来做到这一点。
Any suggestions?有什么建议么?
EDIT 1:编辑1:
After suggestion from @Ozan Manav I changed the language files to use根据@Ozan Manav 的建议,我更改了要使用的语言文件
function Lang() {
greetings: [
'Hello',
'How are you?',
'What is your name?',
],
}
and call it by using:并使用以下方法调用它:
greetings = require(`./I18n/${this.props.locale}.js`).Lang.greetings;
but I would still like to not have to use require
if possible.但如果可能的话,我仍然希望不必使用require
。
Why are you trying to return it as a function?您为什么要尝试将其作为 function 退回?
Maybe you can use as Greetings ["en-EN"] or Greetings ["sv-SE"]也许您可以用作 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?"],
};
Could that be?可以吗?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.