Javascript 在React中切换语言，而不使用外部库

在不使用外部库的情况下，您可以建议如何更改React中的语言？我的方法是使用三元运算符

{language==='en'？'title'：'titre'}

。如果语言为

en

，则显示

title

如果不是，则显示

titre

。你还能推荐什么别的方法。例如，翻译应该放在一个单独的json文件中

代码如下：

类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
语言：‘恩’
};
}
changeLanguage=（）=>{
这是我的国家({
语言：“fr”
})
}
render（）{
const{language}=this.state；
返回(

{语言==='en'？'title'：'titre'}

换语言
);
}
}

国际化（i18n）是一个难题，一些现有的标准解决方案是由专家翻译人员和语言学家设计的，用于解释世界各地的语言怪癖。即使你精通所有目标语言，你也不应该试图想出自己的解决方案

这并不意味着您需要一个库（您可以自己实现其中的一个标准），但内联编写i18n逻辑将无法扩展，并且可能无法很好地工作

i18n最简单的情况是，如果您翻译的字符串不依赖于上下文，并且是没有插值的完整句子。你可以使用一种非常基本的方法，比如使用一本大的翻译字典，然后只查找其中的每个字符串。它看起来有点像你的三元组，但至少可以扩展到多种语言，在没有库的情况下这样做是合理的：

l10n = {
    'title': {en: 'title', fr: 'titre'}
}

<p>
    {l10n['title'][lang]}
</p>

如果确实需要，可以将区域设置作为参数传递，并以某种方式将其存储在React的状态中。决定不需要这样做，因为真正的用户很少切换语言，在这种情况下可以重新加载整个应用程序。

国际化（i18n）是一个难题，一些现有的标准解决方案是由专家翻译人员和语言学家设计的，用于解释世界各地的语言怪癖。即使你精通所有目标语言，你也不应该试图想出自己的解决方案

这并不意味着您需要一个库（您可以自己实现其中的一个标准），但内联编写i18n逻辑将无法扩展，并且可能无法很好地工作

i18n最简单的情况是，如果您翻译的字符串不依赖于上下文，并且是没有插值的完整句子。你可以使用一种非常基本的方法，比如使用一本大的翻译字典，然后只查找其中的每个字符串。它看起来有点像你的三元组，但至少可以扩展到多种语言，在没有库的情况下这样做是合理的：

l10n = {
    'title': {en: 'title', fr: 'titre'}
}

<p>
    {l10n['title'][lang]}
</p>

---

如果确实需要，可以将区域设置作为参数传递，并以某种方式将其存储在React的状态中。决定不需要这样做，因为真正的用户很少切换语言，在这种情况下可以重新加载整个应用程序。

我刚刚为工作实现了一个简单的语言组件，它使用本地化和字典（例如JSON）。我将完成这些步骤，最后有一个可行的codesandbox示例。这是一个非常基本的方法，但目前对我们来说效果很好

例如：

1） 一个简单的“字典”，其中包含您要在短代码定义的每种语言中翻译的标记

{ EN: { welcome: 'Welcome' }, FR: { welcome: 'Bienvenue' }, IT: { welcome: 'Benvenuto' } };

2） 初始状态和缩减器，可在语言更改时更新

export const initialState = {
  defaultLanguage: 'EN',
  selectedLanguage: 'IT'
}

export function reducer(state, action) {
  const { type, payload } = action;
  switch (type) {
    case 'LANGUAGE_UPDATE': {
      return { ...state, selectedLanguage: payload };
    }
    default: return state;
  }
}

3） 本地化上下文/提供者。您可以将代码包装在提供程序中，每个子组件都可以通过上下文访问状态。我们导入dictionary和state/reducer，创建新的上下文，然后设置将state和dictionary传递到其中的提供者

import dictionary from './dictionary';
import { initialState, reducer } from './localisationReducer';

export const LocalisationContext = React.createContext();

export function LocalisationProvider({ children }) {
  const localisationStore = useReducer(reducer, initialState);
  return (
    <LocalisationContext.Provider value={{ localisationStore, dictionary }}>
      {children}
    </LocalisationContext.Provider>
  );
}

6） Translate组件还通过上下文访问状态和字典，并基于所选语言执行翻译

import { LocalisationContext } from './localisation';

export default function Translator({ token }) {

  const {
    localisationStore: [state], dictionary
  } = useContext(LocalisationContext);

  const {
    selectedLanguage, defaultLanguage
  } = state;

  const translatedToken = dictionary[selectedLanguage][token] || dictionary[defaultLanguage][token];

  return (
    <Fragment>
      {translatedToken}
    </Fragment>
  );

}

从“/Localization”导入{LocalizationContext}；
导出默认函数转换器（{token}）{
常数{
LocalizationStore:[州]，字典
}=useContext（LocalsationContext）；
常数{
选择的语言，默认语言
}=国家；
const translatedToken=dictionary[selectedLanguage][token]| | dictionary[defaultLanguage][token]；
返回(
{translatedToken}
);
}

---

这是我的建议。只需从下拉列表中选择一种新语言，即可看到主要的“欢迎”文本更改。

我刚刚为工作实现了一个简单的语言组件，它使用本地化和字典（例如JSON）。我将完成这些步骤，最后有一个可行的codesandbox示例。这是一个非常基本的方法，但目前对我们来说效果很好

例如：

1） 一个简单的“字典”，其中包含您要在短代码定义的每种语言中翻译的标记

{ EN: { welcome: 'Welcome' }, FR: { welcome: 'Bienvenue' }, IT: { welcome: 'Benvenuto' } };

2） 初始状态和缩减器，可在语言更改时更新

export const initialState = {
  defaultLanguage: 'EN',
  selectedLanguage: 'IT'
}

export function reducer(state, action) {
  const { type, payload } = action;
  switch (type) {
    case 'LANGUAGE_UPDATE': {
      return { ...state, selectedLanguage: payload };
    }
    default: return state;
  }
}

3） 本地化上下文/提供者。您可以将代码包装在提供程序中，每个子组件都可以通过上下文访问状态。我们导入dictionary和state/reducer，创建新的上下文，然后设置将state和dictionary传递到其中的提供者

import dictionary from './dictionary';
import { initialState, reducer } from './localisationReducer';

export const LocalisationContext = React.createContext();

export function LocalisationProvider({ children }) {
  const localisationStore = useReducer(reducer, initialState);
  return (
    <LocalisationContext.Provider value={{ localisationStore, dictionary }}>
      {children}
    </LocalisationContext.Provider>
  );
}

6） Translate组件还通过上下文访问状态和字典，并基于所选语言执行翻译

import { LocalisationContext } from './localisation';

export default function Translator({ token }) {

  const {
    localisationStore: [state], dictionary
  } = useContext(LocalisationContext);

  const {
    selectedLanguage, defaultLanguage
  } = state;

  const translatedToken = dictionary[selectedLanguage][token] || dictionary[defaultLanguage][token];

  return (
    <Fragment>
      {translatedToken}
    </Fragment>
  );

}

从“/Localization”导入{LocalizationContext}；
导出默认函数转换器（{token}）{
常数{
LocalizationStore:[州]，字典
}=useContext（LocalsationContext）；
常数{
选择的语言，默认语言
}=国家；
const translatedToken=dictionary[selectedLanguage][token]| | dictionary[defaultLanguage][token]；
雷图