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

例如，直接在原生input元素上使用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 (
    
  );
}

在这种情况下，inputRef.current将直接指向原生的HTML DOM元素。

Ref转发的核心机制

Refs的强大之处在于其转发能力。通过React.forwardRef，父组件可以获取到子组件内部的DOM节点或组件实例的引用。React官方文档中提到：“Ref转发不限于DOM组件。你也可以将Refs转发给类组件实例。”这句话的重点在于区分了Ref可以指向的不同目标类型。

1. Ref指向原生DOM元素： 这是最常见的用法，Ref会直接指向底层的HTML元素。
2. Ref指向类组件实例： 当Ref被转发到一个类组件时，它将指向该类组件的实例，而不是其内部的某个DOM元素。这意味着你可以通过这个Ref调用类组件内部的方法或访问其状态（尽管通常不推荐直接操作组件内部状态）。

这种区分至关重要。对于函数组件，由于它们没有实例，如果需要将Ref转发到其内部的DOM元素，就必须使用React.forwardRef。对于类组件，Ref可以直接指向其自身实例。

Ref转发至类组件实例的示例

让我们通过一个具体的例子来理解Ref如何转发给类组件实例。假设我们有一个ClassComponent，它内部渲染了一个input元素。我们希望父组件能够获取到这个ClassComponent的实例，或者通过它间接地获取到内部的input元素。

首先，定义一个简单的类组件：

Delphi 7应用编程150例 全书内容 CHM版

Delphi 7应用编程150例 CHM全书内容下载，全书主要通过150个实例，全面、深入地介绍了用Delphi 7开发应用程序的常用方法和技巧，主要讲解了用Delphi 7进行界面效果处理、图像处理、图形与多媒体开发、系统功能控制、文件处理、网络与数据库开发，以及组件应用等内容。这些实例简单实用、典型性强、功能突出，很多实例使用的技术稍加扩展可以解决同类问题。使用本书最好的方法是通过学习掌握实例中的技术或技巧，然后使用这些技术尝试实现更复杂的功能并应用到更多方面。本书主要针对具有一定Delphi基础知识

下载

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，它将Ref转发给ClassComponent。这里，我们使用React.forwardRef来接收父组件的Ref，并将其作为innerRef属性传递给ClassComponent。

import React from 'react';

// ClassComponent定义如上

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

// 父组件如何使用这个转发了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 (