React useImperativeHandle 怎么暴露子组件方法？

Question

仓乃文 · Accepted Answer

父组件通过 ref 调用子组件方法时，useImperativeHandle 可以精确控制暴露哪些方法，而不是把整个 DOM 实例暴露出去，既安全又灵活。基本用法： ```javascript const Child = React.forwardRef(function Child(props, ref) { const inputRef = useRef(null); useImperativeHandle(ref, () => ({ focus: () => inputRef.current.focus(), // 只暴露 focus 方法 scrollIntoView: () => inputRef.current.scrollIntoView(), getValue: () => inputRef.current.value, })); return ; }); // 父组件调用 function Parent() { const childRef = useRef(null); return ( <> ); } ``` React 19 写法（ref 作为 prop，不再需要 forwardRef）： ```javascript function Child({ ref }) { const inputRef = useRef(null); useImperativeHandle(ref, () => ({ focus: () => inputRef.current.focus(), })); return ; } ``` 补充说明： - 不用 useImperativeHandle 而直接暴露 DOM，父组件可以随意操作子组件内部，违反封装原则 - 第二个参数的返回值就是 ref.current 拿到的对象 - 第三个参数是依赖数组，依赖变化时重新创建暴露的方法 - React 19 中 ref 作为普通 prop 传递，useImperativeHandle 用法不变