JS如何实现Ref转发？Ref的传递-js教程-PHP中文网

ref转发的解决方案是使用react.forwardref，它允许父组件将ref传递给子组件并直接访问其内部dom元素或组件实例；具体实现是通过将子组件包裹在react.forwardref中，使其接收props和ref两个参数，并将ref绑定到内部目标元素上，从而实现命令式操作如聚焦输入框、控制媒体播放等；典型应用场景包括管理焦点、触发动画、集成第三方库及访问dom节点；使用时需注意ref不是props，不会触发重新渲染，且不能直接用于普通函数组件，必须通过forwardref使其“ref-able”；此外，ref的滥用会破坏声明式逻辑，应仅在必要时使用；在高阶组件（hoc）中，ref不会自动转发，需显式在hoc内部使用react.forwardref接收ref并传递给被包装组件，同时确保被包装组件本身也支持ref转发，否则ref链条会中断导致ref.current为null或指向错误实例。

JS如何实现Ref转发？Ref的传递

Ref转发，在JavaScript的世界里，尤其是在React这样的UI库中，它提供了一种机制，允许父组件将一个ref向下传递给子组件，即使这个子组件是一个函数组件，最终这个ref可以附着在子组件内部的一个DOM元素或另一个组件实例上。说白了，就是父组件想直接“摸”到子组件里面的某个东西，比如一个输入框，然后对它做一些命令式的操作，比如聚焦。

解决方案

要实现Ref转发，我们主要依赖React提供的

React.forwardRef

登录后复制

这个高阶组件（HOC）。它的核心思想是，当你定义一个组件时，不再仅仅接收

props

登录后复制

，还能接收到父组件传下来的

ref

登录后复制

。

具体操作是这样：你把你原本的函数组件或类组件（虽然类组件用得少些，但原理一样）包裹在

React.forwardRef

登录后复制

里面。这个

forwardRef

登录后复制

会给你的组件函数多传递一个参数，就是那个

ref

登录后复制

。

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

// 子组件，我们希望它能接收并转发一个ref
const MyInput = React.forwardRef((props, ref) => {
  // 在这里，ref参数就是父组件传递下来的ref
  // 我们可以把它附着到内部的DOM元素上
  return <input type="text" ref={ref} {...props} />;
});

// 父组件，使用MyInput并传递ref
function ParentComponent() {
  const inputRef = useRef(null);

  useEffect(() => {
    // 假设我们想在组件挂载后自动聚焦输入框
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []);

  return (
    <div>
      <p>这是一个父组件</p>
      <MyInput placeholder="请输入内容" ref={inputRef} />
      <button onClick={() => inputRef.current.value = ''}>清空输入</button>
    </div>
  );
}

export default ParentComponent;

登录后复制

看，

MyInput

登录后复制

这个函数组件，通过

React.forwardRef

登录后复制

的包裹，它现在能接收第二个参数

ref

登录后复制

了。然后，我们简单地把这个

ref

登录后复制

直接传给了内部的

<input>

登录后复制

元素。这样一来，父组件

ParentComponent

登录后复制

创建的

inputRef

登录后复制

就能直接指向

MyInput

登录后复制

内部的那个真实的DOM

<input>

登录后复制

元素了。这比什么都用props来控制要直接得多，尤其是在处理一些DOM原生行为的时候。

为什么我们需要Ref转发？Ref传递的典型场景有哪些？

有时候，我们写React组件，虽然倡导“声明式UI”，但总会遇到一些不得不与底层DOM元素打交道的场景。Ref转发就是为了解决这些“不得不”的问题。

想想看，你可能需要：

管理焦点、文本选择或媒体播放。 比如，一个自定义的搜索框组件，当用户点击搜索按钮后，你希望输入框能自动获得焦点，或者一个视频播放器组件，你需要调用它的
```
play()
```
登录后复制
或
```
pause()
```
登录后复制
方法。这些都是命令式的操作，不是通过改变props就能直接搞定的。
触发强制性动画。 有些动画库可能需要直接操作DOM元素来启动动画。
集成第三方DOM库。 比如一些图表库、日期选择器，它们可能需要你提供一个DOM元素作为容器，然后它们自己去渲染内容。这时候，你需要把一个ref传递给它们。
访问子组件的DOM节点。 比如，你有一个通用按钮组件，但某个特定场景下，你需要获取它的宽度或位置信息。

Ref转发就是提供了一个“逃生舱”，让你能安全、可控地突破React的声明式限制，去直接操作DOM，而不用搞得一团糟。它不是用来传递数据的，数据流依然是props的职责；ref是用来传递“引用”的，通常是为了执行一些命令式的操作。

Ref转发在使用时有哪些需要注意的细节和潜在的“坑”？

Ref转发虽然方便，但用起来还是有些门道的，不是随便就能用的。

首先，ref不是props。这意味着当你把一个

ref

登录后复制

传递给一个组件时，它不会像

props

登录后复制

那样触发组件的重新渲染。

ref.current

登录后复制

的值变了，React是不会知道的，也不会因此重新渲染组件。你得自己去管理这些命令式的副作用，通常结合

useEffect

登录后复制

来做。

其次，你不能直接把ref附着到普通的函数组件上。如果你有一个普通的

const MyComponent = () => <div>...</div>;

登录后复制

，然后你在父组件里尝试

<MyComponent ref={myRef} />

登录后复制

，React会给你一个警告，告诉你ref只能附着在类组件或DOM元素上。这就是为什么我们需要

React.forwardRef

登录后复制

，它让你的函数组件变得“ref-able”。

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

再来，

ref

登录后复制

参数是
forwardRef
登录后复制
回调函数的第二个参数。这有时候会让人感到困惑，因为我们习惯了第一个参数是

props

登录后复制

，然后就没有了。但

forwardRef

登录后复制

就是多给了一个

ref

登录后复制

，所以你的函数签名会是

(props, ref) => {...}

登录后复制

。别写错了，否则ref就收不到了。

还有，不要滥用ref。Ref是一个“逃生舱”，不是日常交通工具。大多数情况下，你都应该通过props来传递数据和回调函数，实现声明式的UI。只有当你确实需要直接操作DOM，或者调用子组件暴露的命令式方法时，才考虑使用ref。过度使用ref会使你的组件变得难以理解和维护，因为它引入了命令式的、非React式的数据流。

最后，ref对象本身是可变的。

ref.current

登录后复制

这个属性是可读写的，你可以随时改变它指向的内容。这与React的单向数据流和不可变性原则有些冲突，所以在使用时要格外小心，确保你的操作是幂等的，并且不会产生意料之外的副作用。

Ref转发在处理高阶组件（HOC）时有什么特别的考量？

高阶组件（HOC）是React中一种强大的复用逻辑的方式，它本质上是一个函数，接收一个组件作为参数，然后返回一个新的组件。但HOC有一个常见的“陷阱”：它们默认不会自动转发ref。

想象一下，你有一个

withLogger

登录后复制

HOC，它给任何传入的组件增加一些日志功能：

// 假设这是你的HOC
const withLogger = (WrappedComponent) => {
  const WithLogger = (props) => {
    // 这里可能会做一些日志记录
    console.log('Component rendered:', WrappedComponent.name);
    return <WrappedComponent {...props} />;
  };
  // 方便调试，给HOC包裹后的组件一个友好的名字
  WithLogger.displayName = `withLogger(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;
  return WithLogger;
};

// 原始组件
const MyButton = ({ onClick, children }) => (
  <button onClick={onClick}>{children}</button>
);

// 包裹后的组件
const LoggedButton = withLogger(MyButton);

// 父组件尝试使用LoggedButton并传递ref
function App() {
  const btnRef = useRef(null);

  useEffect(() => {
    // 这里的btnRef.current会是LoggedButton组件的实例（如果LoggedButton是类组件）
    // 或者null（如果LoggedButton是函数组件），但它不会是MyButton内部的那个button DOM元素
    console.log(btnRef.current); // 很大可能不是你想要的那个DOM button
  }, []);

  return <LoggedButton ref={btnRef}>点击我</LoggedButton>;
}

登录后复制

在这个例子中，

btnRef

登录后复制

并不会指向

MyButton

登录后复制

内部的那个真实DOM

<button>

登录后复制

元素。因为

withLogger

登录后复制

返回的

withLogger

登录后复制

组件并没有“知道”要转发ref。它只是简单地把

props

登录后复制

传给了

WrappedComponent

登录后复制

，而

ref

登录后复制

在React中是一个特殊的属性，它不会被自动作为普通的

prop

登录后复制

传递下去。

要解决这个问题，你需要让你的HOC也使用

React.forwardRef

登录后复制

：

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

const withLogger = (WrappedComponent) => {
  // HOC现在也使用forwardRef来接收并转发ref
  const WithLogger = React.forwardRef((props, ref) => {
    console.log('Component rendered:', WrappedComponent.displayName || WrappedComponent.name);
    // 将接收到的ref传递给WrappedComponent
    return <WrappedComponent ref={ref} {...props} />;
  });

  WithLogger.displayName = `withLogger(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;
  return WithLogger;
};

const MyButton = React.forwardRef(({ onClick, children }, ref) => (
  // MyButton本身也需要能接收ref，并把它附着到DOM上
  <button onClick={onClick} ref={ref}>{children}</button>
));

const LoggedButton = withLogger(MyButton);

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

  useEffect(() => {
    if (btnRef.current) {
      console.log('Ref current:', btnRef.current); // 这时候就会是真实的DOM button了
      btnRef.current.style.backgroundColor = 'lightblue';
    }
  }, []);

  return <LoggedButton ref={btnRef}>点击我</LoggedButton>;
}

export default App;

登录后复制

现在，