多语言readme

dev/i18n
Lei OT 1 year ago
parent e3a1788b7a
commit 77a03b89bc

@ -0,0 +1,46 @@
## 目录结构
├── locales
│ ├── en
│ │ ├── common.json
│ │ ├── [ns].json
│ ├── zh
│ │ ├── common.json
│ │ ├── [ns].json
1. 翻译的资源文件位于 public/locales 文件夹,文件夹结构是 [语言] > [命名空间].json.
[语言]命名使用短格式, 暂不考虑区分地区差异. 如: en-GB, en-US, en-AU 均使用`en`
2. common.json 是公共的 json 文件,存放一些公共的 key-value
3. [ns].json 是命名空间 json 文件,存放一些命名空间的 key-value
4. 命名空间根据自己的需求/功能模块来创建,比如:`group`(团计划), `feedback`(反馈表)等
5. json 文件中的 key 使用驼峰命名
⭐DEV
1. 翻译的资源文件位于 public 下, 切换语言时异步请求.
2. 开发过程编辑了 locales/\*.json 后, 需要刷新页面才会生效. 热加载不生效
3. 新增的命名空间, 添加到 src/i18n/index.js 中配置的 `init({ ns })`
⭐⭐ 组件中使用
1. 默认 common 命名空间
2. 取值: `t('[ns]:[json_path]')`, json path 的层级使用`.`分隔
```js
import { useTranslation } from 'react-i18next';
const { t } = useTranslation();
// const { t, i18n } = useTranslation('group'); // 指定命名空间
// 默认common命名空间
<button >{t('Search')}</button>
<button >{t('datetime.thisWeek')}</button>
// 命名空间取值
<button >{t('group:ArrivalDate')}</button>
```
⭐⭐⭐ 格式: 日期, 金额等
[文档 Formatting](https://www.i18next.com/translation-function/formatting)
Loading…
Cancel
Save