React常量传递：Props Drilling、Context与导入对比及Context使用疑问

我来帮你搞定这个Context获取translate函数的棘手问题！你用Context替代Props Drilling的思路完全没问题，只是在16.3.1这个特定版本里，消费Context的方式有一些需要注意的细节，下面一步步给你拆解解决方案：

1. 先把Context的基础配置做对 #

首先得确保你的Context创建和Provider的设置是正确的，这是后续一切的基础：

// 新建i18n/TranslationContext.js
import React from 'react';

// 创建Context时给个默认值，避免未被Provider包裹时报错
const TranslationContext = React.createContext({
  translate: () => '', // 默认空函数兜底
  ...yourTranslationConstants // 把翻译常量也一起放进来
});

export default TranslationContext;

然后在根组件（或者合适的父组件层级）用Provider包裹所有需要翻译的子组件，传入真实的translate函数和常量：

// App.js
import TranslationContext from './i18n/TranslationContext';
import { translate, SYM_NO, ...otherConstants } from './i18n/translations';

function App() {
  const translationValue = {
    translate,
    SYM_NO,
    ...otherConstants
  };

  return (
    <TranslationContext.Provider value={translationValue}>
      {/* 所有需要用到翻译的子组件都放在这里面 */}
      <YourDeepNestedChildComponent />
    </TranslationContext.Provider>
  );
}

2. 类组件中获取translate函数的两种方式 #

React 16.3.1给类组件提供了两种消费Context的方式，你可以根据场景选择：

方式一：用static contextType（最简洁） #

适合只需要消费单个Context的类组件，不管是JSX还是生命周期里都能直接用：

import React, { Component } from 'react';
import TranslationContext from './i18n/TranslationContext';

class SomeChildComponent extends Component {
  // 声明当前组件要使用的Context
  static contextType = TranslationContext;

  componentDidMount() {
    // 在生命周期里直接通过this.context获取translate
    const noText = this.context.translate(SYM_NO);
    console.log(noText); // 比如输出法语的"NON"
  }

  render() {
    // JSX里也能直接调用
    return <div>{this.context.translate(SYM_NO)}</div>;
  }
}

方式二：用Context.Consumer（多Context场景适用） #

如果你的组件需要同时消费多个Context，或者想在函数组件里用，就选这种方式：

import React, { Component } from 'react';
import TranslationContext from './i18n/TranslationContext';

class AnotherChildComponent extends Component {
  render() {
    return (
      <TranslationContext.Consumer>
        {({ translate, SYM_NO }) => (
          <div>
            {translate(SYM_NO)}
            {/* 还能在回调里做逻辑处理，比如把translate传给子组件 */}
          </div>
        )}
      </TranslationContext.Consumer>
    );
  }
}

3. 函数组件中获取translate函数 #

注意哦，React 16.3.1还没有Hook（Hook是16.8才推出的），所以函数组件只能通过Context.Consumer来消费：

import React from 'react';
import TranslationContext from './i18n/TranslationContext';

function FunctionChildComponent() {
  return (
    <TranslationContext.Consumer>
      {({ translate, SYM_NO }) => {
        // 在这里可以直接调用translate做逻辑处理
        const lowerCaseNo = translate(SYM_NO).toLowerCase();
        return <div>{lowerCaseNo}</div>;
      }}
    </TranslationContext.Consumer>
  );
}

4. 常见问题排查 #

如果还是拿不到translate函数，大概率是这几个原因：

• Provider没包裹目标组件：要确保你的子组件在TranslationContext.Provider的范围内，不然会用createContext时的默认值。
• Context实例不统一：Provider和Consumer必须导入同一个Context实例，别在多个文件里重复创建Context。
• 默认值设置不合理：如果Provider的value传错了，组件会用默认值，所以默认值最好设成不会报错的空函数或者占位内容。

这样调整后，不管是JSX里还是组件的逻辑代码里，都能顺利拿到translate函数，彻底摆脱Props Drilling的繁琐啦！

内容的提问来源于stack exchange，提问作者Rhubarb65