您可以在React App中拥有可全局访问的功能吗？

Question

我有一个用于字符串外部化的功能，用于翻译和本地化站点的内容。

const t = (string_to_trans) => {
    return lang[string_to_trans];
}

我想使函数t在所有组件中都可以全局访问。我发现可以通过将其附加到

之类的全局或窗口来实现

global.t = t

没有我的App.js文件，但是要调用它，我似乎不得不使用

global.t('string_to_trans');

有没有一种方法不必使用global或window来做到这一点，所以我只能使用

来调用它

t('string_to_trans');

Answer 1

React的方法是使用Context。 https://reactjs.org/docs/context.html

<Context.Provider
    value={{
        translate: (string_to_trans) => lang[string_to_trans]
    }}
>
    {this.props.children}
</Context.Provider>

您甚至可以

<Context.Provider value={lang}>{this.props.children}</Context.Provider>

然后直接在组件内部访问您的翻译词典。