React@16.x（30）useImperativeHandle

本文主要是介绍React@16.x（30）useImperativeHandle，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1，介绍

在介绍 ref 时提到，ref 不能作用于函数组件，所以有了 ref 转发。

举例：

function Child(props, ref) {return <h1 ref={ref}>child</h1>;
}const ChildWrap = React.forwardRef(Child);export default function App() {const refChild = useRef();return (<><ChildWrap ref={refChild}></ChildWrap><buttononClick={() => {console.log(refChild.current);}}>获取Child组件</button></>);
}

而 useImperativeHandle 的作用：在 ref 转发的前提下，为了更方便的在函数组件中使用 ref。

2，使用

其他代码不变，只对子组件做如下修改：

function Child(props, ref) {useImperativeHandle(ref,() => {return 123; // 相当于 ref.current = 123},[]);// 此时 h1 上的 ref 失效。return <h1 ref={ref}>child</h1>;
}

同样的，依赖项不变，该HOOK的回调函数不会再次执行。

此时在父组件中获取的 refChild.current 就是 123。
所以如果想通过父组件调用子组件的一些方法，可以将这些方法放到 useImperativeHandle 的第2个参数中即可：

function Child(props, ref) {useImperativeHandle(ref,() => {return {method1() {console.log("method1");},method2() {console.log("method2");},};},[]);return <h1>child</h1>;
}

父组件调用：refChild.current.method1()。

---

以上。

这篇关于React@16.x（30）useImperativeHandle的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---