React forwardRef 废弃后 ref 怎么传给子组件？

Question

仓乃文 · Accepted Answer

React 19 起 ref 可以作为普通 prop 传递，不再需要 forwardRef 包裹。子组件直接从 props 中解构 ref 即可，代码更简洁。 React 19 新写法： ```javascript // 不再需要 forwardRef function Input({ ref, placeholder }) { return ; } function App() { const inputRef = useRef(null); return ; } ``` 配合 useImperativeHandle 暴露方法： ```javascript function Modal({ ref, children }) { const dialogRef = useRef(null); useImperativeHandle(ref, () => ({ open: () => dialogRef.current.showModal(), close: () => dialogRef.current.close(), })); return ; } ``` 旧写法对比（React 18 及以下）： ```javascript const Input = React.forwardRef(function Input({ placeholder }, ref) { return ; }); ``` 补充说明： - React 19 中 ref 变成普通 prop，函数组件可以直接从 props 解构 - 旧代码用 forwardRef 写的仍然兼容，React 会发出废弃警告 - 类组件的 ref 行为不变，仍然指向组件实例 - 如果子组件不使用 ref，ref 不会出现在 props 中（和之前行为一致）