这是我参与新手入门的第1篇文章

嗨喽啊！今天在我们的项目中多了一个未曾接触过的需求，“国际化”这玩意让我研究了有一会了。说实话，有想打人的冲动了，咋老是我不会的，我就这么差吗？头都秃了呀！不能够吧？？？

ok,话不多说，让我们进入正题吧！

一、配置国际化

locale: {
    default: 'zh-CN',
    antd: false,
    title: false,
    baseNavigator: true,
    baseSeparator: '-',
  }
复制代码

将此代码放入umirc.ts即可打开国际化的大门。

二、创建各国语言文档

src 下创建文件夹locales
创建各国语言文档切记文件名要符合规范

各国语言标识文档

中文文档

export default  {
   //“id”：“展示内容”
    "hellow":"你好",
}
复制代码

英文文档

export default {
    //“id”：“展示内容”
    "hellow":"hellow",
}
复制代码

引入useIntl,setlocale

import {useIntl,setLocale} from 'umi'

初始化intl

const Intl = useIntl();

模拟数据

const data=[{
        text:Intl.formatMessage({
           //"id":"语言文档中的id"
            id:"hellow",
        })
    }]
复制代码

渲染数据

 {
     data.map((item,index:number)=>{
        return <div key={index}>
            {item.text}
                </div>
            })
      }
复制代码

代码展示

// 引入
import { useEffect, useState } from "react";
import {useIntl, setLocale} from "umi";
const A=()=>{
    const Intl=useIntl();
    //模拟数据
    const data=[{
        text:Intl.formatMessage({
            id:"hellow",
        })
    }]
    // state（开关）
    const [state, setstate] = useState(true)
    // 监听state开关
    useEffect(() => {
        // 修改当前文章的语言
        setLocale(state?"zh-CN":"en-US",false)
    }, [state])
    return <div>
        {
            data.map((item,index:number)=>{
                return <div key={index}>
                    {item.text}
                </div>
            })
        }
        <button onClick={()=>{
            setstate(!state);    
        }}>切换</button>
    </div>
}
export default A;
复制代码