深入理解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 (
    <input type="text" ref={inputRef} placeholder="输入一些内容" />
  );
}

在这种情况下，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
        value={this.props.value}
        onChange={this.props.onChange}
        ref={this.props.innerRef} // 这里将Ref附加到DOM元素
        placeholder="这是一个类组件中的输入框"
      />
    );
  }
}

现在，我们创建一个函数组件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 <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;

在这个例子中，ParentComponent通过classComponentRef获取到的实际上是ClassComponent内部的那个input DOM元素的引用，因为ClassComponent直接将innerRef附加到了input元素上。

如果ClassComponent内部不将innerRef附加到DOM元素，而是希望父组件获取到ClassComponent的实例本身呢？

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;

在这个场景中，instanceRef.current将直接指向ClassComponentInstance的实例，允许父组件调用其公共方法（如sayHello）。这正是文档中“你可以将Refs转发给类组件实例”所强调的含义。

总结与注意事项

• DOM组件在React Refs的语境中，通常指原生的HTML元素（如
  ,

理解这些细微的差别对于正确使用Refs至关重要，它能帮助你避免常见的错误，并更灵活地控制React应用中的DOM和组件行为。然而，过度使用Refs可能会导致命令式代码的增加，与React的声明式范式相悖，因此应在必要时才使用Refs。