最陌生的hooks: useImperativeHandle-技术圈 (proginn.com)
ref 的使用
普通的类组件有实例所以可以用过 React.createRef() 挂载到节点或组件上,然后通过 this 获取到该节点或组件。
class RefTest extends React.Component{ constructor(props){ super(props); this.myRef=React.createRef(); } componentDidMount(){ console.log(this.myRef.current); } render(){ return <input ref={this.myRef}/> } }
useImperativeHandle 的使用
正常情况下 ref 是不能挂在到函数组件上的,因为函数组件没有实例,但是 useImperativeHandle 为我们提供了一个类似实例的东西。它帮助我们通过 useImperativeHandle 的第 2 个参数,所返回的对象的内容挂载到 父组件的 ref.current 上。
forwardRef会创建一个React组件,这个组件能够将其接受的 ref 属性转发到其组件树下的另一个组件中。
语法:
useImperativeHandle(ref, createHandle, [deps])
-
ref
需要被赋值的ref
对象。 -
crea
teHandle
:createHandle
函数的返回值作为ref.current
的值。 -
[deps]
依赖数组,依赖发生变化会重新执行createHandle
函数。
import React, { forwardRef, useImperativeHandle, useEffect, useRef } from 'react' const TestRef = forwardRef((props, ref) => { useImperativeHandle(ref, () => ({ open() { console.log("open") } })) }) function App () { const ref = useRef() useEffect(() => { ref.current.open() },[]) return( <> <div>石小阳</div> <TestRef ref={ref}></TestRef> </> ) } export default App
标签:current,createHandle,useImperativeHandle,方法,React,使用,组件,ref From: https://www.cnblogs.com/domin520Jian/p/16771592.html