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

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或指向错误实例。

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

解决方案

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

React.forwardRef

props

ref

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

React.forwardRef

forwardRef

ref

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

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

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

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

  return (
    

      
这是一个父组件
      
       inputRef.current.value = ''}>清空输入
    
  );
}

export default ParentComponent;

看，

MyInput

React.forwardRef

ref

ref

ParentComponent

inputRef

MyInput

为什么我们需要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

useEffect

SOAP语法 word版

SOAP、WSDL(WebServicesDescriptionLanguage)、UDDI(UniversalDescriptionDiscovery andIntegration)之一， soap用来描述传递信息的格式， WSDL 用来描述如何访问具体的接口， uddi用来管理，分发，查询webService 。具体实现可以搜索 Web Services简单实例 ; SOAP 可以和现存的许多因特网协议和格式结合使用，包括超文本传输协议（HTTP），简单邮件传输协议（SMTP），多用途网际邮件扩充协议

下载

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

const MyComponent = () => 
...
;

React.forwardRef

再来，

ref

forwardRef

props

forwardRef

ref

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

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

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

ref.current

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

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

想象一下，你有一个

withLogger

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

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

// 包裹后的组件
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 点击我;
}

在这个例子中，

btnRef

MyButton

withLogger

withLogger

props

WrappedComponent

ref

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 ;
  });

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

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

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 点击我;
}

export default App;

现在，

withLogger

withLogger

forwardRef

ref

ref

WrappedComponent

MyButton

MyButton

forwardRef

处理HOC和ref转发时，确保每个环节都正确地转发了ref，这很重要，否则你可能会发现

ref.current

null