如何在多层嵌套的React类组件中转发App组件的Ref？

嘿，我明白你现在的需求啦——你不想再通过application={this}这种逐层传递props的方式让底层组件拿到App的实例，而是想通过Ref转发来更优雅地实现，对吧？这就给你两种靠谱的解决方案：

方案一：用forwardRef包装类组件（推荐） #

React.forwardRef原本是为函数组件设计的，但我们可以用它来包装类组件，实现跨层级的Ref转发，不用再手动传递冗余的props。

完整代码示例 #

import React, { useEffect } from 'react';

// 包装MySimpleClass，使其支持接收并转发Ref
const MySimpleClass = React.forwardRef((props, ref) => {
  return <MySimpleClassInner {...props} forwardedRef={ref} />;
});

class MySimpleClassInner extends React.Component {
  render() {
    // 把接收到的Ref继续传递给下一层组件
    return <MyAnotherClass {...this.props} forwardedRef={this.props.forwardedRef} />;
  }
}

// 同样包装MyAnotherClass
const MyAnotherClass = React.forwardRef((props, ref) => {
  return <MyAnotherClassInner {...props} forwardedRef={ref} />;
});

class MyAnotherClassInner extends React.Component {
  render() {
    return <AndAnotherClass {...this.props} forwardedRef={this.props.forwardedRef} />;
  }
}

// 最底层的AndAnotherClass，直接使用转发来的Ref访问App实例
const AndAnotherClass = React.forwardRef((props, ref) => {
  useEffect(() => {
    // 当Ref指向App实例时，就能访问它的public属性啦
    if (ref.current) {
      console.log(ref.current.testCase); // 输出："Woooa dis is test!"
    }
  }, [ref]);

  return <div>这是最底层的组件</div>;
});

// App组件，创建Ref并传递给子组件
class App extends React.Component {
  /** @public */ 
  testCase = "Woooa dis is test!";
  
  constructor(props) {
    super(props);
    this.appRef = React.createRef();
  }

  render() {
    // 把Ref传递给MySimpleClass，最终会转发到AndAnotherClass
    return <MySimpleClass ref={this.appRef} />;
  }
}

关键说明 #

• 每个中间类组件都用forwardRef做一层包装，这样就能接收上层传递的Ref，再通过自定义props（比如forwardedRef）传递给内部的类组件。
• 最底层的组件可以直接通过Ref访问App的实例，不需要再依赖application这类props。

方案二：手动传递Ref对象（适合简单场景） #

如果你的组件层级不多，也可以直接把App的Ref对象通过props逐层传递，这种方式更直观，不需要额外的包装：

完整代码示例 #

import React from 'react';

class App extends React.Component {
  /** @public */ 
  testCase = "Woooa dis is test!";
  
  constructor(props) {
    super(props);
    this.appRef = React.createRef();
    // 把Ref的current指向App自身
    this.appRef.current = this;
  }

  render() {
    return <MySimpleClass appRef={this.appRef} />;
  }
}

class MySimpleClass extends React.Component {
  render() {
    // 直接把Ref传递给下一层
    return <MyAnotherClass appRef={this.props.appRef} />;
  }
}

class MyAnotherClass extends React.Component {
  render() {
    return <AndAnotherClass appRef={this.props.appRef} />;
  }
}

class AndAnotherClass extends React.Component {
  componentDidMount() {
    // 通过Ref对象的current访问App实例
    console.log(this.props.appRef.current.testCase); // 输出："Woooa dis is test!"
  }

  render() {
    return <div>这是最底层的组件</div>;
  }
}

关键说明 #

• App组件创建Ref后，主动把current指向自身，再通过appRef props逐层传递。
• 底层组件通过this.props.appRef.current就能拿到App的实例，操作简单，适合层级较少的场景。

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