React-Internationalisierung – Verwendung von react-intl

npx erstellen-reagieren-app reagieren-intl-demo  
npm ich reagiere-intl -S

importiere React, { useContext } von 'react'
import { IntlProvider } from 'react-intl' // Eingebunden in die äußerste Schicht von Komponenten, die eine Internationalisierung der Sprache benötigen, genau wie der Provider von react-redux. Lassen Sie Komponenten und Unterkomponenten innerhalb von Komponenten die von react-intl bereitgestellten APIs und Methoden verwenden. import { mainContext } from '../reducer' // Hier verwenden wir useReducer, um einfach einen im Stammverzeichnis zu erstellen, um die globale Statusverwaltung der Sprache zu steuern. import zh_CN from './cn' // Chinesisches Paket import en_US from './en' // Englisches Paket const Inter = (props) => {
    // Holen Sie sich die Standardspracheinstellungen. Sie können es auch in Verbindung mit einer globalen Statusverwaltung wie Redux Mobx oder useReducer verwenden, die von React selbst bereitgestellt werden. const { state } = useContext(mainContext)
  const wähleLocale = (val) => { 
    let _val = val || navigator.language.split('_')[0]
    Schalter (_val) {
      Fall 'en':
        zurück de_US
      Fall 'zh':
        Rückgabe zh_CN
      Standard:
        Rückgabe zh_CN
    }
  }
  let locale = state.locale // Gebietsschema abrufen
  let { Kinder } = Requisiten
  // Unterkomponenten umschließen, um die API von react-intl zu teilen und so eine mehrsprachige Rückgabe zu erreichen (
    <InternationalerAnbieter
      Schlüssel={Gebietsschema}
      Gebietsschema={Gebietsschema}
      Standardgebietsschema='zh'
      Nachrichten={wähleGebietsschema(Gebietsschema)}
    >
      {Kinder}
    </IntlProvider>
  )
}

Export Standard Inter

const zh_CN = {
    start: "Start",
    Schalter: 'Schalter'
  }
  Export-Standard zh_CN
  

const en_US = {
    start: "Start",
    Schalter: 'Schalter'
  }
  Exportstandard en_US
  

importiere React, { useReducer } von 'react'
const CHANGE_LOCALE = "LOCALE ÄNDERN"

const mainContext = React.createContext()

const Reducer = (Status, Aktion) => {
  Schalter (Aktion.Typ) {
    Fall CHANGE_LOCALE:
      return { ...Status, Gebietsschema: Aktion.Gebietsschema || 'zh' }
    Standard:
      Rückgabestatus
  }
}

const ContextProvider = (Eigenschaften) => {
  const [Status, Versand] = useReducer(Reducer, {
    Gebietsschema: „zh“
  })
  zurückkehren (
    <mainContext.Provider-Wert={{ Status, Dispatch }}>
      {props.children}
    </mainContext.Provider>
  )
}

export { Reduzierer, Hauptkontext, Kontextanbieter }

importiere './App.css';
importiere { ContextProvider } von './reducer'
importiere Inter aus './locale/intl'
Ansicht aus „./views“ importieren

Funktion App() {
  zurückkehren (
    <Kontextprovider>
      <Inter>
        <Anzeigen />
      </Inter>
    </ContextProvider>
  );
}
Standard-App exportieren;

importiere react, { useContext} von 'react'
importiere { Hauptkontext } von '../Reducer'
importiere { FormattedMessage } von 'react-intl'
 
Funktion Index() {
    const { Dispatch, Status } = useContext(Hauptkontext)
    const { locale } = Status
    const changeLang = () => { // Ändere die Sprache im zu wechselnden Status dispatch({
            Typ: 'CHANGE_LOCALE',
            Gebietsschema: Gebietsschema === 'zh' ? 'en' : 'zh'
        })
    }
    zurückkehren (
        <div>
           <div>
            <FormattedMessage id="start" ></FormattedMessage>
           </div>
           <div>
                <button onClick={changeLang} > <FormattedMessage id="switch" ></FormattedMessage></button>
           </div>
        </div>
    );
}
Standardindex exportieren;