javascript - 如何使用 React context API 实现多语言站点

Question

我有以下代码，到目前为止一切正常，但内容是静态的。我正在寻找如何实现语言切换器，但我正在研究如何使用每个选定的语言导入不同的对象。

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] });
};