如何使用React上下文API實現多語言站點

Question

我有以下代碼，到目前為止一切正常，但內容是靜態的。 我正在尋找如何實現lang切換器，但Im堆棧上有關於如何與每個選定的lang導入不同的obj的信息。

import React, { Component, createContext } from "react";
import { en } from "./components/language/en";
import { gr } from "./components/language/gr";

const Context = createContext();

export class Provider extends Component {
  constructor() {
   super();
   this.state = {
     lang: en
   };
 }

selectLanguage = e => {
   this.setState({ lang: e.target.value });
};

render() {
  return (
    <Context.Provider
      value={{ lang: this.state.lang, selectLang: this.selectLanguage 
  }}
  >
     {this.props.children}
    </Context.Provider>
  );
 }
}

export const Consumer = Context.Consumer;

Answer 1

首先，您需要創建對象來保存所有json：

import { en } from "./components/language/en";
import { gr } from "./components/language/gr";

var langs = {
    en: en,
    gr: gr 
};

然后將selectLanguage更改為：

selectLanguage = e => {
   const langKey = e.target.value;
   this.setState({ lang: langs[langKey] });
};