useImperativeHandle使用实例

2022-03-03 10:03:01 阅读：491 来源： 互联网

标签：const useImperativeHandle 实例 forwardRef 使用组件 ref 给父

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剑客

标签：const,useImperativeHandle,实例,forwardRef,使用,组件,ref,给父
来源： https://blog.csdn.net/WJLcomeon/article/details/123246152

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

useImperativeHandle使用实例

useImperativeHandle介绍