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
这个高阶组件（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”。
再来，
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;
现在，
withLogger
HOC内部的
withLogger
组件使用了
forwardRef
，它能够接收到父组件传下来的
ref
，然后它再把这个
ref
传递给它所包裹的
WrappedComponent
（也就是
MyButton
）。当然，
MyButton
本身也必须是能够接收并处理ref的组件（即也用
forwardRef
包裹）。这样，ref的链条才算是完整了。
处理HOC和ref转发时，确保每个环节都正确地转发了ref，这很重要，否则你可能会发现
ref.current
总是
null
或者指向了不该指向的东西。这是一个常见的进阶问题，理解它能让你更好地构建可复用的组件。
评论（已关闭）
评论已关闭