使用 React Context 进行国际化

Question

通过大量研究，我知道国际化/本地化是 React context 功能的少数合法用例之一。但是我的问题是关于一个人是否真的需要使用上下文。将要国际化的组件包装在一个提供本地化字符串作为道具的高阶组件中不是同样有效吗？例如对于支持英语和西班牙语的应用：

// 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;

带有本地化 JSON 如：

// en.json
{
  "header": "My App",
  "description": "This is an internationalizated app in React",
}

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

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

我能想到的主要问题是将一个可能很大的 JSON 注入到每个需要其中一个字符串的组件中的开销。是否还有其他不首选此解决方案的原因？

Answer 1

使用大型本地化结构作为props 的Component 之一不会造成任何损失。因为对象不是按值传递的，而是对对象的引用被复制。所以没有什么需要担心的问题。

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

这就是为什么人们使用context: 来制作中间的Components 完全不知道Components 使用的一些在层次结构中较低的东西。

更新。您使用WithLocale 的解决方案将有效，但在切换区域设置时强制Components 重绘存在问题。您必须在两个地方更新currentLocale：在WithLocale.js 内部和您的根目录Component。除此之外，与使用context 相比，我没有看到任何可能的缺点。