react 国际化
时间: 2023-12-06 17:03:09 浏览: 33
React国际化是指在React应用程序中实现多语言支持的过程。react-intl-universal是一个流行的React国际化库,它提供了一种简单的方法来实现多语言支持。下面是一个简单的演示:
1. 安装react-intl-universal库
```shell
npm install react-intl-universal --save
```
2. 初始化react-intl-universal
```javascript
import intl from 'react-intl-universal';
const locales = {
'en-US': require('./locales/en-US.json'),
'zh-CN': require('./locales/zh-CN.json'),
};
class App extends React.Component {
state = { initDone: false };
componentDidMount() {
intl.init({ currentLocale: 'en-US', locales }).then(() => {
this.setState({ initDone: true });
});
}
render() {
return (
<div>
{this.state.initDone && <h1>{intl.get('APP_TITLE')}</h1>}
</div>
);
}
}
```
3. 在组件中使用react-intl-universal
```javascript
import intl from 'react-intl-universal';
class MyComponent extends React.Component {
render() {
return (
<div>
<p>{intl.get('GREETING', { name: 'John' })}</p>
<p>{intl.get('FAREWELL', { name: 'Jane' })}</p>
</div>
);
}
}
```
在上面的代码中,我们首先初始化了react-intl-universal,然后在组件中使用intl.get()方法来获取翻译后的文本。我们还可以使用intl.getHTML()方法来获取翻译后的HTML。