深入理解React中Refs与DOM组件及类组件的关联

import React, { useRef, useEffect } from 'react';

function MyInput() {
  const inputRef = useRef(null);

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus(); // 直接访问DOM节点并调用其方法
    }
  }, []);

  return <input type="text" ref={inputRef} />;
}

import React, { useRef, useEffect } from 'react';

// FancyButton 是一个功能组件，通过 forwardRef 接收并转发 Ref
const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

function App() {
  const buttonRef = useRef(null);

  useEffect(() => {
    if (buttonRef.current) {
      console.log('Button DOM element:', buttonRef.current);
      buttonRef.current.style.backgroundColor = 'lightblue';
    }
  }, []);

  return (
    <FancyButton ref={buttonRef}>
      点击我
    </FancyButton>
  );
}

import React, { useRef, useEffect } from 'react';

// 子类组件
class MyClassComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: props.initialValue || ''
    };
    this.inputRef = React.createRef(); // 内部Ref用于访问自己的DOM元素
  }

  // 类组件的公共方法
  focusInput = () => {
    if (this.inputRef.current) {
      this.inputRef.current.focus();
    }
  };

  render() {
    // 这里的 innerRef 是通过 props 接收的外部 Ref
    // 它将指向 MyClassComponent 的实例
    return (
      <div>
        <label>{this.props.label}: </label>
        <input
          type="text"
          value={this.state.value}
          onChange={(e) => this.setState({ value: e.target.value })}
          ref={this.inputRef} // 内部 Ref 绑定到 input 元素
        />
        {/* 如果需要将外部 Ref 绑定到这个 input，则需要将 innerRef 传递给它，
            但这里我们展示的是外部 Ref 绑定到类组件实例本身的情况 */}
      </div>
    );
  }
}

// 使用 React.forwardRef 将 Ref 转发给 MyClassComponent
const ForwardedMyClassComponent = React.forwardRef((props, ref) => {
  // 注意：这里的 ref 是外部传进来的，它将指向 MyClassComponent 的实例
  // 我们将它作为 props 传递给 MyClassComponent
  return <MyClassComponent {...props} instanceRef={ref} />;
});

// 父组件
function ParentComponent() {
  const classComponentRef = useRef(null); // 这个 Ref 将指向 MyClassComponent 的实例

  useEffect(() => {
    if (classComponentRef.current) {
      console.log('Class component instance:', classComponentRef.current);
      // 可以调用类组件实例的方法
      classComponentRef.current.focusInput();
    }
  }, []);

  return (
    <ForwardedMyClassComponent
      label="用户名"
      initialValue="ReactUser"
      ref={classComponentRef} // 将 Ref 传递给 ForwardedMyClassComponent
    />
  );
}

export default ParentComponent;