如何在React的College组件中访问School组件定义的Ref

嘿，我来帮你搞定这个在College组件里访问School组件ref的问题！针对React类组件的场景，我给你整理了两种实用的方案，你可以根据自己的代码情况选择：

方案一：通过回调函数传递Ref（最小改动现有代码） #

这个方案不需要大改你现有的School组件，只需要加个回调props把ref传递给父组件（也就是College）：

1. 修改School组件 #

在原来的ref回调里，增加一行代码把DOM元素通过props的回调函数传出去：

import React from 'react';
class School extends React.Component {
  render() {
    return (
      <div className="navigator" ref={(input) => { 
        this.schoolref = input; // 保留你原来的ref赋值
        // 把ref传递给父组件
        if (this.props.onRef) {
          this.props.onRef(input);
        }
      }}>
        <div className="pan ui-draggable" style={this.props.subNavDimension} />
      </div>
    );
  }
}
export default School;

2. 修改College组件 #

在College里定义变量存储School的ref，渲染School时传入回调函数，然后在showshool方法里就能访问到了：

import React from 'react';
import School from './School';

class College extends React.Component {
  constructor(props) {
    super(props);
    this.schoolRef = null; // 用来存储School的DOM ref
  }

  showshool = () => {
    // 现在可以直接访问School的DOM元素了
    if (this.schoolRef) {
      console.log('School的DOM元素:', this.schoolRef);
      // 比如你可以获取它的位置、样式，或者调用DOM方法
      const elementStyle = window.getComputedStyle(this.schoolRef);
      console.log('School的样式:', elementStyle);
    }
  }

  render() {
    return (
      <div>
        {/* 传入onRef回调，把School的ref赋值给College的schoolRef */}
        <School 
          subNavDimension={this.props.subNavDimension} 
          onRef={(ref) => this.schoolRef = ref} 
        />
        {/* 可以加个按钮测试一下 */}
        <button onClick={this.showshool}>访问School Ref</button>
      </div>
    );
  }
}
export default College;

方案二：使用React.createRef + Ref转发（更规范的React方式） #

如果想遵循React官方推荐的ref转发方案，我们可以用React.forwardRef来包装类组件，让父组件可以直接传递ref：

1. 修改School组件（添加Ref转发） #

因为类组件本身不能直接接收ref属性，所以我们用forwardRef把ref转发成组件的props（比如innerRef）：

import React from 'react';

class School extends React.Component {
  render() {
    // 把innerRef绑定到目标DOM元素上
    return (
      <div className="navigator" ref={this.props.innerRef}>
        <div className="pan ui-draggable" style={this.props.subNavDimension} />
      </div>
    );
  }
}

// 用forwardRef创建转发后的组件，把外部传入的ref传给innerRef props
const ForwardedSchool = React.forwardRef((props, ref) => {
  return <School {...props} innerRef={ref} />;
});

export default ForwardedSchool;

2. 修改College组件 #

在College里创建createRef实例，直接传递给转发后的School组件：

import React from 'react';
import School from './School'; // 注意这里导入的是转发后的ForwardedSchool

class College extends React.Component {
  constructor(props) {
    super(props);
    // 创建ref实例
    this.schoolRef = React.createRef();
  }

  showshool = () => {
    // 通过current属性访问DOM元素
    if (this.schoolRef.current) {
      console.log('School的DOM元素:', this.schoolRef.current);
      // 比如获取元素的尺寸
      const rect = this.schoolRef.current.getBoundingClientRect();
      console.log('School的位置和尺寸:', rect);
    }
  }

  render() {
    return (
      <div>
        {/* 直接把ref传递给School组件 */}
        <School ref={this.schoolRef} subNavDimension={this.props.subNavDimension} />
        <button onClick={this.showshool}>访问School Ref</button>
      </div>
    );
  }
}
export default College;

小提醒 #

尽量不要滥用ref哦！React的设计理念是优先用状态（state）和属性（props）来管理组件之间的交互，只有当你必须直接操作DOM元素（比如获取尺寸、焦点、调用原生DOM方法）的时候，再考虑使用ref。

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