Reactjs 使用React上下文进行国际化

通过大量的研究，我知道国际化/本地化是React特性为数不多的合法用例之一。然而，我的问题是一个人是否真的需要使用上下文。将要国际化的组件封装在一个更高阶的组件中，该组件提供本地化字符串作为一个道具，这不是很好吗？e、 g.对于支持英语和西班牙语的应用程序：

// WithLocale.js
import React from 'react';

import en from './locales/en-US.json';
import es from './locales/es-ES.json';

const locales = {'en-US': en, 'es-ES': es};

let currentLocale = (navigator.languages && navigator.languages[0])
    || navigator.language
    || navigator.userLanguage
    || 'en-US';

const WithLocale = (WrappedComponent) => {
    return (props) => {
            const locale = { strings: locales[currentLocale] };
            return <WrappedComponent {...props} locale={locale} />
    }
};

export default WithLocale;

以及如何在组件中使用它的一个非常基本的示例：

import React from 'react';
import PropTypes from 'prop-types';
import WithLocale from './WithLocale';

const SubComponent = (props) => (
        <div>
            <p className="App-intro">
                {props.locale.strings.description}
            </p>
        </div>
);

SubComponent.propTypes = {
    locale: PropTypes.object
};

export default WithLocale(SubComponent);

从“React”导入React；
从“道具类型”导入道具类型；
从“/WithLocale”导入WithLocale；
常量子组件=（道具）=>(

{props.locale.strings.description}

);
子组件.propTypes={
区域设置：PropTypes.object
};
导出默认语言环境（子组件）；

---

我能想到的主要问题是，在每个需要一个字符串的组件中注入一个可能很大的JSON会带来很大的开销。是否有其他原因不推荐此解决方案？

使用大型本地化结构作为

组件的
道具之一不会造成任何损失。因为对象不是按值传递的，而是复制对对象的引用。因此，没有一个问题值得关注

真正的问题是，当您不使用
上下文时，您必须将本地化从根
组件一直传递到最底层的组件。事件如果您的中间
组件
不关心本地化，他们仍然必须接受本地化道具并进一步传递它们

这就是为什么人们使用
上下文
：使中间
组件
完全不知道层次结构中较低的
组件所使用的某些东西

更新。您使用
with locale
的解决方案将起作用，尽管在切换locale时强制
组件
重新绘制存在问题。您必须在两个位置更新
currentLocale
：在
WithLocale.js
内部和根
组件中。除此之外，与使用
context
相比，我看不到任何可能的缺点
 在
with locale
HoC中包装子组件的导出不会解决通过中间组件传递本地化道具的问题吗？我预见到的问题是，我的示例将导致创建许多本地化对象，我用locale封装的
组件越多，DTetik更新了答案。创建的对象将非常小，即
{strings:reference to locales}
。我不会太在意它们。谢谢你-如果我没有弄错的话，你可以在根级别强制更新来处理重绘问题。这没什么大不了的，因为区域设置在会话中不应该变化太多。但也存在处理
shouldComponentUpdate
生命周期方法的问题，该方法可以防止更改（无论是使用道具还是上下文）。我将在以后的问题中解决这个问题
import React from 'react';
import PropTypes from 'prop-types';
import WithLocale from './WithLocale';

const SubComponent = (props) => (
        <div>
            <p className="App-intro">
                {props.locale.strings.description}
            </p>
        </div>
);

SubComponent.propTypes = {
    locale: PropTypes.object
};

export default WithLocale(SubComponent);