React新Context API结合带ref组件报错问题求助

嘿，这个问题我之前在项目里也踩过坑！核心原因是你在<MyContext.Consumer>里写的那个箭头函数(contextVal) => <MyComponent ... />本质上是一个无状态函数组件，而React 16.3.x里还不支持直接给函数组件传递ref——哪怕你实际渲染的是类组件，中间这个函数层会把ref“吃掉”，导致报错。

下面给你两个靠谱的解决方案：

方案1：用React.forwardRef透传ref（推荐，React 16.3+原生支持） #

React 16.3刚好引入了forwardRef API，专门用来解决这种“ref透传”的场景。我们可以把Consumer和组件的逻辑抽成一个用forwardRef包装的组件：

import React from 'react';

// 定义一个透传ref的包装组件
const MyComponentWithContext = React.forwardRef((props, ref) => (
  <MyContext.Consumer>
    {contextVal => (
      // 把外部传入的ref直接传给内部的MyComponent
      <MyComponent ref={ref} globCx={contextVal} {...props} />
    )}
  </MyContext.Consumer>
));

// 然后在Provider中使用这个包装组件
export default class Parent extends React.Component {
  constructor(props) {
    super(props);
    // 用createRef创建ref（替代过时的字符串ref）
    this.myComponentRef = React.createRef();
  }

  render() {
    return (
      <MyContext.Provider value={{'key':'val'}}>
        <MyComponentWithContext ref={this.myComponentRef} />
      </MyContext.Provider>
    );
  }
}

这样外部的ref就会直接指向<MyComponent>的类实例，完美绕过中间的函数组件层。之后要访问组件实例的话，用this.myComponentRef.current即可。

方案2：改用回调ref（兼容更早版本，无需forwardRef） #

如果因为某些原因不想用forwardRef，可以用回调ref代替字符串ref（顺便提一句：字符串ref已经被官方标记为过时特性，不建议继续使用）。代码示例如下：

export default class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.myComponentRef = null;
    // 定义一个回调函数来接收ref
    this.setMyComponentRef = (ref) => {
      this.myComponentRef = ref;
    };
  }

  render() {
    return (
      <MyContext.Provider value={{'key':'val'}}>
        <MyContext.Consumer>
          {contextVal => (
            // 把回调函数作为ref传入
            <MyComponent ref={this.setMyComponentRef} globCx={contextVal} />
          )}
        </MyContext.Consumer>
      </MyContext.Provider>
    );
  }
}

React会在<MyComponent>挂载时自动调用setMyComponentRef，把组件实例赋值给this.myComponentRef；卸载时会传入null，这样你就能正常访问到类组件的实例了。

额外小提示 #

尽量避免使用字符串ref，官方推荐用React.createRef()（类组件）或useRef()（函数组件）来创建ref，配合forwardRef使用会让代码更规范、更易维护。

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