深入理解React中Refs、DOM组件与类组件实例的Ref转发机制

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

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

  useEffect(() => {
    // 在组件挂载后，inputRef.current将指向实际的DOM input元素
    if (inputRef.current) {
      inputRef.current.focus(); // 自动聚焦
    }
  }, []);

  return (
    <input type="text" ref={inputRef} placeholder="输入一些内容" />
  );
}

import React from 'react';

class ClassComponent extends React.Component {
  focusInput = () => {
    // 假设这里有一个内部inputRef，或者直接操作通过props传入的innerRef
    if (this.props.innerRef && this.props.innerRef.current) {
      this.props.innerRef.current.focus();
    } else {
      console.log("无法聚焦：innerRef未设置或其current属性为空");
    }
  };

  render() {
    // 将父组件通过innerRef传入的ref附加到内部的input元素上
    return (
      <input
        value={this.props.value}
        onChange={this.props.onChange}
        ref={this.props.innerRef} // 这里将Ref附加到DOM元素
        placeholder="这是一个类组件中的输入框"
      />
    );
  }
}

import React from 'react';

// ClassComponent定义如上

// 使用React.forwardRef将Ref转发给ClassComponent
const Input = React.forwardRef(function (props, ref) {
  // 这里的ref是父组件传入的，它将被传递给ClassComponent的innerRef属性
  return <ClassComponent {...props} innerRef={ref} />;
});

// 父组件如何使用这个转发了Ref的Input组件
function ParentComponent() {
  const classComponentRef = React.useRef(null);

  const handleClick = () => {
    if (classComponentRef.current) {
      // 这里的classComponentRef.current指向ClassComponent内部的input DOM元素
      // 因为ClassComponent直接将innerRef附加到了input上
      classComponentRef.current.focus();
      classComponentRef.current.value = "已聚焦并设置值";
    }
  };

  return (
    <div>
      <Input ref={classComponentRef} />
      <button onClick={handleClick}>聚焦并设置输入框</button>
    </div>
  );
}

export default ParentComponent;

import React from 'react';

class ClassComponentInstance extends React.Component {
  sayHello = () => {
    alert("Hello from ClassComponentInstance!");
  };

  render() {
    return (
      <div>
        <p>这是一个类组件实例</p>
        <input type="text" placeholder="内部输入框" />
      </div>
    );
  }
}

// 父组件直接将Ref附加到ClassComponentInstance
function ParentComponentWithInstanceRef() {
  const instanceRef = React.useRef(null);

  const handleInstanceClick = () => {
    if (instanceRef.current) {
      // 这里的instanceRef.current指向ClassComponentInstance的实例
      instanceRef.current.sayHello(); // 调用实例方法
    }
  };

  return (
    <div>
      <ClassComponentInstance ref={instanceRef} />
      <button onClick={handleInstanceClick}>调用类组件实例方法</button>
    </div>
  );
}

export default ParentComponentWithInstanceRef;