useImperativeHandle可以让你在使用ref时自定义暴露给父组件的实例值。在大多数情况下,应当避免使用ref这样的命令式代码。useImperativeHandle应当与forwardRef一起使用。
useImperativeHandle介绍 useImperativeHandle(ref, createHandle, [deps])通过useImperativeHandle可以只暴露特定的操作
通过useImperativeHandle的Hook, 将父组件传入的ref和useImperativeHandle第二个参数返回的对象绑定到了一起
所以在父组件中, 调用inputRef.current时, 实际上是返回的对象
useImperativeHandle使用简单总结:
作用: 减少暴露给父组件获取的DOM元素属性, 只暴露给父组件需要用到的DOM方法
参数1: 父组件传递的ref属性
参数2: 返回一个对象, 以供给父组件中通过ref.current调用该对象中的方法
实例:
父组件:
import React, { useState, useEffect, useRef } from 'react'; const childForm = useRef<any>({}); const cRef = useRef() as React.MutableRefObject<any>; //使用子组件暴露出来的方法 cRef.current const handleAgree = async () => { const res = await cRef.current.onFinish(); } <Modal title="云端情报库" visible={isShow} onOk={handleAgree} onCancel={handleOff} destroyOnClose={true} > //CloudIntelligence 子组件 <CloudIntelligence cRef={cRef} data={dataform} /> </Modal>子组件:
import React, { useState, useImperativeHandle, useEffect } from 'react'; //子组件解析出来 const { cRef, data } = props; // 将方法暴露给父组件使用 useImperativeHandle(cRef, () => ({ form, onFinish, }));回顾一下ref和forwardRef结合使用:
通过forwardRef可以将ref转发给子组件子组件拿到父组件创建的ref, 绑定到自己的某一个元素中 import React, { useRef, forwardRef } from 'react' // forwardRef可以将ref转发给子组件 const JMInput = forwardRef((props, ref) => { return <input type="text" ref={ref} /> }) export default function ForwardDemo() { // forward用于获取函数式组件DOM元素 const inputRef = useRef() const getFocus = () => { inputRef.current.focus() } return ( <div> <button onClick={getFocus}>聚焦</button> <JMInput ref={inputRef} /> </div> ) }forwardRef的做法本身没有什么问题, 但是我们是将子组件的DOM直接暴露给了父组件:
直接暴露给父组件带来的问题是某些情况的不可控父组件可以拿到DOM后进行任意的操作我们只是希望父组件可以操作的focus,其他并不希望它随意操作其他方法参考来源:
React Hook 中useImperativeHandle介绍使用与场景 - 网页3剑客
1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,会注明原创字样,如未注明都非原创,如有侵权请联系删除!;3.作者投稿可能会经我们编辑修改或补充;4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |