云南网站建设及优化,html5的网站设计,做h5场景的网站,广州建设官方网站一、国际化 / i18n
目前国际化#xff0c;就是开发者写对象#xff0c;一个key关联若干语种的翻译。相比于浏览器自带的翻译功能#xff0c;语义更加准确。 “国际化”的简称#xff1a;i18n#xff08;其来源是英文单词 internationalization的首末字符i和n#xff0c;…一、国际化 / i18n
目前国际化就是开发者写对象一个key关联若干语种的翻译。相比于浏览器自带的翻译功能语义更加准确。 “国际化”的简称i18n其来源是英文单词 internationalization的首末字符i和n18为中间的字符数 二、react项目国际化 react-intl是业界最受欢迎的软件包之一React-intl是雅虎的语言国际化开源项目FormatJS的一部分通过其提供的组件和API可以与ReactJS绑定。这种方法引入了两个主要问题 一只能应用于视图层例如React.Component。对于Vanilla JS文件原生JS无法对其进行国际化。 二要获取React.Component的实例react-intl不能使用常规方法如this.refs.comname 相比之下react-intl-universal具有以下特征
react-intl-universal不仅可以在React.Component中使用还可以在Vanilla JS中使用简单。只有三个主要的API和一个可选的帮助器。显示不同语言环境的数字货币日期和时间。多元化字符串中的标签。消息中的支持变量。在消息中支持HTML。支持150多种语言。在浏览器和Node.js中运行。消息格式由ICU标准严格执行。支持嵌套JSON格式的语言环境数据。
三、具体实现
1. 安装
cnpm install react-intl-universal --save2. App.js文件
本地语言文件 en-US.json
{tableTitle: Results,searchBoardTitle: filter,ReportNumber: Report Number
}zh-CN.json
{tableTitle: 列表,searchBoardTitle:查询,ReportNumber: 报案号
}引入ant组件、加载语言环境数据
import { ConfigProvider } from antd;
import { emit } from ./emit.js
import zh_CN from antd/es/locale/zh_CN;
import en_US from antd/es/locale/en_US;
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.PureComponent {constructor(props) {super(props);this.state {antdLang: zh_CN, // 修改antd 组件的国际化}}async componentWillMount(){const { userStore, history } this.props;emit.on(change_language, lang this.loadLocales(lang)); // 监听语言改变事件this.loadLocales(); // 初始化语言}loadLocales(lang en-US) {intl.init({currentLocale: lang, // 设置初始语言locales,}).then(() {this.setState({antdLang: lang zh-CN ? zh_CN : en_US});});}
...加入antd的LocaleProvider 组件该组件接受一个属性 locale该属性为当前语言的文案。antd 会通过 react 的 context 将这些信息传递给被 LocaleProvider 包裹的子组件 render() {return (ConfigProvider locale{this.state.antdLang} div className{styles.App}PolestarAppHeader /Suspense fallback{div/div}SwitchRoute path/ exact component{Home} //Switch/Suspense/PolestarApp/div/ConfigProvider)}3. emit.js文件
通过events实现事件监听即在header切换语言时发送消息把切换事件传递到App.js中接收消息
const EventEmitter require(events).EventEmitter;
const emit new EventEmitter();
export { emit };4. header中增加语言切换
import React from react;
import styles from ./header.module.css;
import { Select } from antd;
import { emit } from ../../emit.jsfunction Header() {const handleChange (val) {// 发送消息emit.emit(change_language, val);}return (div className{styles.header_container}p className{styles.header_name}/pSelect defaultValueEnglish onChange{handleChange}Option valueen-USEnglish/OptionOption valuezh-CN中文/Option/Select/div)
}export default Header;5.国际化
1. 业务组件的国际化
以claimsManage.js为例
import intl from react-intl-universal; // 引入原先写死的部分改成intl.get(key)
2.单独抽取出的js文件的国际化 如果直接在js文件中引入react-intl-universal并使用intl.get(label)传递给searchBoard组件的label为空需要将原先导出对象改写成一个function这样就可以在locales的国际化初始化完成的后再生成新的配置对象改写后内容如下
import intl from react-intl-universal;const SearchFormSetting () ({lineNum: 4,data: [{type: TextField,initialValue: ,label: intl.get(ReportNumber),key: claimId,},{type: DatePickerField,initialValue: ,label: intl.get(ReportStartTime),longLabel: true,key: reportStartTime},{type: DatePickerField,initialValue: ,longLabel: true,label: intl.get(ReportEndTime),key: reportEndTime},]}
)
export default SearchFormSetting3.其他
1带变量的消息 get方法的第二个参数中的变量name、where将会被替换成字符串 组件
p{intl.get(HELLO, { name: Tony,where:intl.get(where) }) }/pen-US.json where: Hangzhou,
HELLO: Hello {name}welcome to {where}! zh-CN.json
where: 杭州,HELLO: 你好 {name}欢迎来到{where}2数字复数形式和千分符
组件
p{intl.get(CHANCE, { num: 0 })}/p
p{intl.get(CHANCE, { num: 1 })}/p
p{intl.get(CHANCE, { num: 10000000 })}/pen-US.json
CHANCE: rest chances{num, plural, 0 {none.} 1 {one chance.} other {# chances.}}zh-CN.json
CHANCE: 剩余次数为{num, plural, 0 {零。} 1 {1次。} other {# 次.}}3显示货币 语言环境数据采用ICU格式。 语法为{名称类型格式}。 在如下示例中 price是消息中的变量名称 类型有numberdate和time。 format是可选的如果format是货币代码之一它将以相应的货币格式显示。 如果type为number和format省略则结果为带千分符的格式化数字。 组件
{intl.get(SALE_PRICE, { price: 123456.78 })}en-US.json
SALE_PRICE: The price is {price, number, USD}zh-CN.json
SALE_PRICE: 价格是 {price, number, CNY}货币代码对照表
4显示日期 type为date则format具short、medium、long、full四个值不同type对日期描述的详尽程度也不同不穿默认为short 组件
{intl.get(SALE_START, { start: new Date() })}
{intl.get(SALE_END, { end: new Date() })}en-US.json
SALE_START: Sale begins from {start, date},
SALE_END: to {end, date, long}zh-CN.json
SALE_START: 活动从{start, date}开始,
SALE_END: {end, date, long}结束type - short type - meduim英月份简写 type - long英月份全称 type - full具体到星期 5设置默认值
组件
class Locale extends React.Component {render() {const name Tony;return (div{intl.get(HELLO, { name }).defaultMessage(Hello, ${name})}/div);}
}en-US.json HELLO: Hello, {name} zh-CN.json
HELLO: 你好, {name}6返回HTML
组件
{intl.getHTML(TIP)}en-US.json
TIP: This is span stylecolor:redSPAN/span zh-CN.json
TIP: span stylecolor:redspan元素/span
