前提知识点
useImperativeHandle
常与forwardRef
和ref
一起使用,所以需要理解后两者的基础用法。可以通过以下两个示例代码,快速了解ref
和forwardRef
的使用方法。
- Demo1: 在Class和Functional函数中使用ref .该示例展示了ref的用法,同时表明不经过
forwardRef
封装的子组件,无法将ref
传给父组件。 - Demo2: farwardRef转发ref.该示例展示了farwardRef的用法,父组件
ForwardButton
成功获取到子组件RefInFunctionalComponent
的ref
useImperativeHandle
官网说
useImperativeHandle customizes the instance value that is exposed to parent components when using ref
怎么理解呢?
当父组件通过forwardRef
属性,得到子组件的ref
时,它只得到一个可读的对象。而useImperativeHandle
配合forwardRef
来使用,则给予了修改ref
的能力,比如为ref
增加自定义方法。
这种在父组件中直接调用子组件ref
函数的方法,一点都不React,所以React并不推荐。但是为了方便第三方库的开发,则需要提供这种自定义ref
的能力。
我们在Demo2的基础上修改一下代码,看看useImperativeHandle
如何工作。
修改子组件RefInFunctionalComponent
,新增useImperativeHandle
代码块,自定义getContent
方法,如下:
const RefInFunctionalComponent = (props, ref) => {
const innerRef = useRef(null)
useImperativeHandle(ref, () => ({
getContent: () => innerRef.current.innerText
}))
const handleClick1 = () => {
console.log(ref.current.innerText)
}
return <button ref={innerRef} onClick={handleClick1}>{props.children}</button>
}
const ForwardButton = forwardRef(RefInFunctionalComponent)
在父组件中使用ForwardButton
:
const App = () => {
const ref = useRef(null)
const handleClick = () => {
console.log(ref.current.getContent()) // 按钮1
}
return (
<div className="wrapper">
<ForwardButton ref={ref}>按钮1</ForwardButton>
<button onClick={handleClick}>获取button1</button>
</div>
);
};
Demo3:完整示例代码。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。