What is internationalization?

Give you simple, for example, a company to do their own website, is China’s face, for the first customers, can do big business, foreigners also found that your products are good, they may know something about, go to login your website, and they found that they don’t understand, you need at this time a function is the internationalization

Function realization picture

First we need to download the react-Intl package. The two components are IntlProvider and FormattedMessage

IntlProvider

Let’s break it down and say Intl and Provoider; The IntlProvider tag is hardpressed into the top-level Dom tree to wrap the font we want to change so that the font can be switched./locales/index folder is covered later

FormattedMessage

FormattedMessage: FormattedMessage. In a more casual way, FormattedMessage means FormattedMessage. If you want to switch formats, you need to define your own.

One more file is needed

This document is in our Chinese and English

It holds different translations of the same field

. / locales/index (IntlProvider)

In this folder, I first introduced my two English and Chinese files just defined, as well as the warehouse we need

Secondly, we need to connect to the warehouse, because the initial value of the warehouse is Chinese, we need to click the event to switch to English.

So the top part of this code is the value that we’re going to pass in and notice that if you change it to en, you’re going to pass in en, and the unus for return has to match the name of your file

So at the bottom of this code we see Provoider, the Provoider attribute locale defaultlocale, mssage the first one is the value, the second one is the initial value, and the third one is the information that we’re passing in, The parentheses correspond to our method which is the value of the return above

The other thing is to add a key field to the state you want to change (the field corresponds to the field in the folder you just mentioned)

implementation

Finally put him on the package to him click the realization switch warehouse inside the initial value can be realized pull

May some small partner or a face question mark can private letter I will give you answer!!