This is the first article I participated in beginners’ introduction

Hi after ather! Today we have a new requirement in our project that I have been working on for a while. To tell you the truth, I have the impulse to hit people, why I will not, I am that bad? The head is bald! Can’t??

Ok, without further ado, let’s get down to business!

1. Configure internationalization

locale: {
    default: 'zh-CN'.antd: false.title: false.baseNavigator: true.baseSeparator: The '-',}Copy the code

Putting this code into umirc.ts opens the door to internationalization.

Second, create national language documents

  • SRC create folder locales

  • Create a national language document file name to comply with the specification

National language identification document

Chinese document

export default  {
   // "id" : "display content"
    "hellow":"Hello",}Copy the code

English document

export default {
    // "id" : "display content"
    "hellow":"hellow",}Copy the code

Introducing useIntl setlocale

import {useIntl,setLocale} from 'umi'

Initialize the intl

const Intl = useIntl();

Simulated data

const data=[{
        text:Intl.formatMessage({
           //"id":" id in language document"
            id:"hellow",})}]Copy the code

Render data

 {
     data.map((item,index:number) = >{
        return <div key={index}>
            {item.text}
                </div>})}Copy the code

The code shown

/ / introduction
import { useEffect, useState } from "react";
import {useIntl, setLocale} from "umi";
const A=() = >{
    const Intl=useIntl();
    // Simulate data
    const data=[{
        text:Intl.formatMessage({
            id:"hellow",})}]// state (switch)
    const [state, setstate] = useState(true)
    // Listen for the state switch
    useEffect(() = > {
        // Modify the language of the current article
        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); }} > switch</button>
    </div>
}
export default A;
Copy the code

The page display

A toggle is a switch that displays the desired language by modifying the Boolean of the switch.

Well, don’t say more so! Try slowly and you’ll get it! I’ll take a nap if I can, so I don’t go bald. Ben is bald from work.

conclusion

  1. I hope my article can make you feel concise, rather than fussy words

    (I can’t read so I don’t write so much text, direct operation)
  2. This is the first time to write an article lightly. (I’m afraid I can’t hold on “thin-skinned” can’t help it)
  3. Suggestions for the article itself (more and more)