Inspired by withApollo, I took a closer look at the CONTEXT API. I haven’t used context in development, but i18N is perfect for transferring data across components like forms in ANTD

Basic code

Let’s start with the three basic components, and the ones we’ll replace are title and desc

import React, { useState } from 'react'

const Title = (a)= > {
  return (
    <div>title</div>)}const Descrption = (a)= > {
  return (
    <div>desc</div>)}const Container = (a)= > {
  return (
    <div>
      <Title />
      <Descrption />
    </div>)}export default Container
Copy the code

Language configuration

Two versions of en and CN language configuration files are prepared:

// en.js
export default {
  locale: 'en'.messages: {
    title: 'title'.desc: 'this is description'}}// zh-CN.js
export default {
  locale: 'zh-CN'.messages: {
    title: 'Chinese'.desc: 'This is a description.'}}Copy the code

Load the language configuration,

// load_language.js
import en from './en'
import zhCN from './zh-CN'

const list = {
  [en.locale]: en.messages,
  [zhCN.locale]: zhCN.messages
}
Copy the code

I remember webpack’s ignore plugin, loading multilingual configuration, will load all languages, if you only need CN, then other languages are useless to you. A common example of this is the moment, where you ignore it using ignorePlugin and then introduce it manually

Using context injection

1. Prepare Conext

// context.js
import React from 'react'

const LanguageContext = React.createContext('zh-CN')

export default LanguageContext

Copy the code

2. Add consumption to load_language:

const t = (title) = > {
  return (
    <LanguageContext.Consumer>
      {language => (
        list[language][title]
      )}
    </LanguageContext.Consumer>)}Copy the code

3, Then I can modify my title and desc directly:

const Title = (a)= > {
  return (
    <div>{t('title')}</div>)}const Descrption = (a)= > {
  return (
    <div>{t('desc')}</div>)}Copy the code

4. Add a language switch button in Container:

  const [language, setLanguage] = useState('zh-CN')
  const changeLanguage = (a)= > {
    setLanguage(language === 'zh-CN' ? 'en' : 'zh-CN')}return (
    <LanguageContext.Provider value={language}>
      <button onClick={changeLanguage}>Switching language: currently {language}</button>
      <Title />
      <Descrption />
      <Descrption22 />
    </LanguageContext.Provider>)}Copy the code

Ok, that’s it

Using Hoc Injection

In addition, T can be injected in the form of hoc

export const withLanguage = (Component) = > (props) => {
  return( <LanguageContext.Consumer> { language => ( <Component {... props} t={(title) => list[language][title] } /> ) } </LanguageContext.Consumer> ) }Copy the code

Use in components:

const Descrption2 = ({ t }) = > {
  return (
    <div>hoc: {t('desc')}</div>)}const Descrption22 = withLanguage(Descrption2)
Copy the code

If you go here, a simple I18n is done.

PS: If Chinese websites want to be internationalized, perhaps the fastest way is to develop a set of English websites, and then do internationalization on its basis. Chinese to English, the length is changed from short to long, typesetting changes will make people collapse.