react国际化

最新推荐文章于 2025-06-15 09:12:22 发布

原创最新推荐文章于 2025-06-15 09:12:22 发布 · 452 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react #国际化 #react-intl-universal

本文介绍了如何在React项目中实现国际化，通过下载并引入react-intl-universal插件，创建中英文字典文件，然后在页面中导入并切换不同语言版本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 下载react-intl-universal插件并引入

import intl from 'react-intl-universal';

2. 手动建两个中英文的文件并抛出
在这里插入图片描述
en-US.js:

export default {
    system: 'EWarningSystem',
    situation: 'The overall situation',
    monitoring: 'Content monitoring',
    groupMonitoring: 'A group monitoring',
    correlationAnalysis: 'Correlation Analysis',
    monitoringConfiguration: 'Monitoring configuration',
    collectconfiguration: 'Collect the configuration',
    systemAdministrator: 'System Administrator'
}

zh-CN.js:

export default {
    system: '突发预警系统',
    situation: '整体态势',
    monitoring: '内容监测',
    groupMonitoring: '群组监测',
    correlationAnalysis: '关联分析',
    monitoringConfiguration: '监测配置',
    collectconfiguration: '采集配置',
    systemAdministrator: '系统管理'
}

index.js:

import zhcn from './zh-CN';
import enus from './en-US';
export default{
    zhcn,
    enus
}

3.页面引入中英文字典并切换

import locales from '../locales';

class BasicLayout extends Component {
	constructor() {
    	super()
    	intl.init({currentLocale:'zhcn',locales}) //一进页面先执行一遍，避免刷新时无数据
 	 }
  	 state = {
    	flag:false
 	 }
  	 render() {
  		<>
  			<span>{intl.get('system')}</span>
  			<Select defaultValue="中文">
                <Option value="英文" onClick={() => {
                  this.handleClick('enus')
                }}
                >英文</Option>
                <Option value="中文" onClick={() => {
                  this.handleClick('zhcn')
                }}>
                中文</Option>
            </Select>
  		</>
  	 }
 	 handleClick = (old) => {//国际化的点击事件
    	this.setState({
     	   flag:true
    	})
    	intl.init({currentLocale:old,locales})
  	 }
}