适用于 react 的 I18n 动态化解决方案
任何建议、问题
https://github.com/cxy2019731/cxy-react-i18n
更新日志
https://github.com/cxy2019731/cxy-react-i18n/blob/master/logs.md
注意
1.使用时需要注意 cxy-react-i18n 的版本和主要依赖 concent 的版本。需要保持一致。 2.当前支持的 concent 版本为:^2.14.12
开始
yarn add cxy-react-i18nor
npm i cxy-react-i18n使用
1.导入注册器
// 项目中未使用concent
import { i18nRun } from "cxy-react-i18n";
i18nRun();2.注册文本
import { setMessage } from "cxy-react-i18n";
const messages = {
zhCN:{
test:"测试",
...
},
enUS:{
test:"test",
...
},
...
};
setMessage(messages);3.设置语言
import { setLang } from "cxy-react-i18n";
setLang("zhCN");4.使用文本
import { renderI18nKeyToText } from "cxy-react-i18n";
renderI18nKeyToText("test");
// lang = zhCN
测试;
// lang = enUS
test;全部 API
i18nRun---------注册器，初始化,适用于未使用 concent 的项目
1.简写：
i18nRun === ir;2.导入
import { i18nRun } from "cxy-react-i18n";
i18nRun();
// 或者
import { ir } from "cxy-react-i18n";
ir();3.注意
1.应尽可能在最顶层逻辑调用--推荐入口文件。
2.`i18nRun`可和已使用concent的项目混合使用,不会出现run的重复使用冲突renderI18nKeyToText---------转换器，转换指定 key 的文本
1.简写：
renderI18nKeyToText === fr;2.导入
import { renderI18nKeyToText } from "cxy-react-i18n";
renderI18nKeyToText("需要转换的key");
// 或者
import { fr } from "cxy-react-i18n";
ir("需要转换的key");3.注意
1.尽可能保证传入的key在调用之前存储进message中。
2.负责将key转换为对应文本setLang----------设置采用的语言 lang
1.简写：
setLang === sl;2.导入
import { setLang } from "cxy-react-i18n";
setLang("已存在的语言包的key");
// 或者
import { sl } from "cxy-react-i18n";
sl("已存在的语言包的key");3.注意
1.传入的key需要在设置之前存储进message中,保证设置的message中存在设置的key的语言包。
2.切换显示的文本采用的语言包getLang---------获取当前采用的语言的 key
1.简写：
getLang === gl;2.导入
import { getLang } from "cxy-react-i18n";
getLang();
// 或者
import { gl } from "cxy-react-i18n";
gl();3.注意
getMessage---------获取当前所有的语言包对象
1.简写：
getMessage === gm;2.导入
import { getMessage } from "cxy-react-i18n";
getMessage();
// 或者
import { gm } from "cxy-react-i18n";
gm();3.注意
1.空对象表示未设置setMessageItem---------设置语言包内容
1.简写：
setMessageItem === smi;2.导入
const message ={
zhCN:{
test:"测试",
...
},
enUS:{
test:"test",
...
},
...
}
import { setMessageItem } from "cxy-react-i18n";
setMessageItem(message);
// 或者
import { smi } from "cxy-react-i18n";
smi(message);3.注意
1.覆盖性设置，需要包含当前正在使用的语言包所有内容,一般只是第一次初始化语言包内容时使用。addMessageItem---------新增语言包
1.简写：
addMessageItem === ami;2.导入
const oldMessage ={
zhCN:{
test:"测试",
...
},
enUS:{
test:"test",
...
},
...
}
const new_message={
zhTW:{
test:'測試'
}
}
import { addMessageItem } from "cxy-react-i18n";
addMessageItem(new_message);
// 或者
import { ami } from "cxy-react-i18n";
ami(new_message);
// 结果
={...oldMessage,...new_message}3.注意
1.增量性设置，常用语初始化后的其他语言包添加进messagedeleteMessageItem---------删除语言包
1.简写：
deleteMessageItem === dmi;2.导入
import { deleteMessageItem } from "cxy-react-i18n";
deleteMessageItem("要删除的语言包的key");
// 或者
import { dmi } from "cxy-react-i18n";
dmi("要删除的语言包的key");3.注意
1.删除单个语言包的全部内容addMessageText---------添加已有语言包的内容
1.简写：
addMessageText === at;2.导入
// 例如已存在zhCN语言包,enUS语言包,现在新增一个key=test2的内容
const addMsgText = {
zhCN: {
test2: "测试2",
},
enUS: {
test2: "test2",
},
};
import { addMessageText } from "cxy-react-i18n";
addMessageText(addMsgText);
// 或者
import { at } from "cxy-react-i18n";
at(addMsgText);3.注意
1.一次性新增多个已存在语言包的内容。
2.添加一个key内容需要补全已存在语言包的同key的值，保证同一个key在多个语言包内都存在对应文本。updateMessageText---------更新已有语言包的已存在的 key 的文本值
1.简写：
updateMessageText === ud;2.导入
// 例如已存在zhCN语言包,enUS语言包,zhTW语言包,语言包都存在test,现在将其修改
const upMsgTest = {
zhCN: {
test: "修改后的文本 zhCN test2",
},
enUS: {
test: "修改后的文本 enUS test2",
},
// zhTW的不修改可不传
};
import { updateMessageText } from "cxy-react-i18n";
updateMessageText(upMsgTest);
// 或者
import { ud } from "cxy-react-i18n";
ud(upMsgTest);3.注意
1.一次性修改多个已存在语言包中已存在的key的文本值。deleteMessageText---------删除已存在的文本对应 key 数据
1.简写：
deleteMessageText === dt;2.导入
const deleteTextKey = "需要删除的文本对应的key";
import { deleteMessageText } from "cxy-react-i18n";
deleteMessageText(deleteTextKey);
// 或者
import { dt } from "cxy-react-i18n";
dt(deleteTextKey);3.注意
1.一次性删除指定key的所有内容，这个只针对语言包内的内容。
2.多个语言包同步删除。getComputed---------获取根据 lang 和 message 计算出的衍生数据
1.简写：
getComputed === gc;2.导入
const getComputedKey = "已存在的衍生数据的key";
import { getComputed } from "cxy-react-i18n";
getComputed(getComputedKey);
// 或者
import { gc } from "cxy-react-i18n";
gc(getComputedKey);3.注意
1.动态更新这些值，但不会动态响应到获取函数...,需要主动获取
2.目前衍生key
i18nMessage---当前才用的语言包的内容
i18nLangObj---已存在的语言包的key对象
i18nLangKeys---已存在的语言包的key数组
i18nMessageKeys---已存在的语言包内容的key数组(默认取message中首个语言包)HOOKS API
useI18nState----------映射状态数据-具有响应能力
1.使用
import { useI18nState } from "cxy-react-i18n";
function App() {
// 获取全部状态-返回object
const i18nState = useI18nState();
// 指定状态key参数-返回指定key的类型
const i18nStateKeyVal = useI18nState(stateKey); //lang or message
return <></>;
}useI18nState----------映射状态方法
1.使用
import { useI18nReducer } from "cxy-react-i18n";
function App() {
// 获取全部reducer方法-返回object
const i18nReducers = useI18nReducer();
// 指定reducer方法key参数-返回指定reducer的方法
const i18nReducerName = useI18nState(reducerName); //这个名称和上面的方法名保持一致,获取数据型API除外
return <></>;
}useI18nComputed----------映射状态计算属性-具有响应能力
1.使用
import { useI18nComputed } from "cxy-react-i18n";
function App() {
// 获取全部计算属性-返回object
const i18nComputeds = useI18nComputed();
// 指定计算属性参数-返回指定计算属性的值
const i18nComputedName = useI18nComputed(computedName); //这个名称useI18nComputed()获取到的对象属性名称保持一致
return <></>;
}useI18nKeyToText----------映射状态计算属性-具有响应能力
1.使用
import { useI18nKeyToText } from "cxy-react-i18n";
function App() {
const keyText = useI18nComputed(textKey); //textKey不填或为空均返回空字符串
return <>{keyText}</>;
}