react中的useImperativeHandle()和forwardRef()用法

目录
  • 一、useImperativeHandle（）
  • 二、forwardRef（）
  • 三、案例
    • 父组件
    • 子组件

一、useImperativeHandle（）

useImperativeHandle(ref, createHandle, [deps])

useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例值。在大多数情况下，应当避免使用 ref

这样的命令式代码。 useImperativeHandle 应当与 forwardRef 一起使用。

function FancyInput(props, ref) {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));
  return <input ref={inputRef} ... />;
}
FancyInput = forwardRef(FancyInput);

在本例中，渲染 的父组件可以调用 inputRef.current.focus()。

二、forwardRef（）

React.forwardRef 会创建一个React组件，这个组件能够将其接受的 ref 属性转发到其组件树下的另一个组件中。

这种技术并不常见，但在以下两种场景中特别有用：

（1）转发 refs 到 DOM 组件

（2）在高阶组件中转发 refs

React.forwardRef 接受渲染函数作为参数。React 将使用 props 和 ref 作为参数来调用此函数。此函数应返回 React 节点。 FancyButton 使用 React.forwardRef 来获取传递给它的 ref，然后转发到它渲染的 DOM button。这样，使用 FancyButton 的组件可以获取底层 DOM 节点 button 的 ref，并在必要时访问，就像其直接使用 DOM button 一样。

const FancyButton = React.forwardRef((props, ref) => (   // Step:3
  <button ref={ref} className="FancyButton">    // Step:4
      {props.children}
  </button>
));
const ref = React.createRef(); // Step:1
<FancyButton ref={ref}>Click me!</FancyButton>; // Step:2

在上述的示例中，React 会将 <FancyButton ref={ref}> 元素的 ref 作为第二个参数传递给 React.forwardRef 函数中的渲染函数。该渲染函数会将 ref 传递给 <button ref={ref}> 元素。 因此，当React 附加了 ref 属性之后，ref.current 将直接指向 <button> DOM 元素实例。 欲了解更多相关信息，请参阅官档 refs 转发。

以下是对上述示例发生情况的逐步解释：（转发 refs 到 DOM 组件）

  • 我们通过调用 React.createRef 创建了一个 React ref 并将其赋值给 ref 变量。
  • 我们通过指定 ref 为JSX 属性，将其向下传递给 <FancyButton ref={ref}>。
  • React 传递 ref 给 forwardRef 内函数 (props, ref) => ...，作为其第二个参数。
  • 我们向下转发该 ref 参数到 <button ref={ref}>，将其指定为 JSX 属性。
  • 当 ref 挂载完成，ref.current 将指向 <button> DOM 节点。

三、案例

父组件

1、注册

2、定义

3、触发

子组件

1、暴露子组件方法，将 forwardRef 接受的 ref 属性转发到其组件树下的另一个组件中

(1)

(2)

(3)父组件

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • React父组件调用子组件中的方法实例详解

    目录 Class组件 1. 自定义事件 2. 使用 React.createRef() 3. 使用回调Refs Function组件 补充:子组件调用父组件方法 总结 文章中涉及 ref 的应用仅为父组件调用子组件场景下的应用方式,并未涵盖 ref 的所有应用方式! Class组件 1. 自定义事件  Parent.js import React, { Component } from 'react'; import Child from './Child'; class Parent exte

  • 详解React hooks组件通信方法

    详解React hooks组件通信方法

    目录 一.前言 二.父子组件通信 1)父组件传值给子组件 2)子组件传值给父组件 3)跨组件传值(父传孙子组件) 一.前言 组件通信是React中的一个重要的知识点,下面列举一下 react hooks中常用的父子.跨组件通信的方法 二.父子组件通信 1)父组件传值给子组件 子组件代码: //子组件 const Child = ({ param1, param2 }) => { return <>父组件传递的参数:{param1},{param2}</> } param1.p

  • React中refs的一些常见用法汇总

    目录 什么是Refs 一.String 类型的 Refs 二.回调 Refs 三.React.createRef() 四.useRef 五.Refs 与函数组件 总结 什么是Refs Refs 提供了一种方式,允许我们访问 DOM 节点或在 render 方法中创建的 React 元素. Ref转发是一项将ref自动通过组件传递到子组件的技巧. 通常用来获取DOM节点或者React元素实例的工具.在React中Refs提供了一种方式,允许用户访问dom节点或者在render方法中创建的React

  • react中的useImperativeHandle()和forwardRef()用法

    react中的useImperativeHandle()和forwardRef()用法

    目录 一.useImperativeHandle() 二.forwardRef() 三.案例 父组件 子组件 一.useImperativeHandle() useImperativeHandle(ref, createHandle, [deps]) useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例值.在大多数情况下,应当避免使用 ref 这样的命令式代码. useImperativeHandle 应当与 forwardRef 一起使用. functio

  • 详解Ref在React中的交叉用法

    目录 一.首先说明下什么是Ref 二.ref在hooks中的用法 1.ref在hooks中HTMLDom的用法 2.ref在hooks中与函数式组件的用法 3.ref在hooks中与类组件一同使用 4.ref在hooks中与class.react-redux一同使用 一.首先说明下什么是Ref Ref 转发是一项将 ref 自动地通过组件传递到其一子组件的技巧.对于大多数应用中的组件来说,这通常不是必需的.但其对某些组件,尤其是可重用的组件库是很有用的 Ref官网说明:点击这里 二.ref在ho

  • 关于react中useCallback的用法

    目录 基础用法 父组件 子组件 useCallback是react中比较重要的一个hook useCallback 用来返回一个函数,在父子组件传参或者通用函数封装中,起到举足轻重的作用. 基础用法 useCallback的用法与useState的用法基本一致,但最后会返回一个函数,用一个变量保存起来. 返回的函数a会根据b的变化而变化,如果b始终未发生变化,a也不会重新生成,避免函数在不必要的情况下更新. 记得子组件导出时使用memo包裹一下,其作用是对组件前后两次进行浅对比,阻止不必要的更新

  • React 中使用 react-i18next 国际化的过程(react-i18next 的基本用法)

    目录 简介 安装与使用 安装 准备新建一个 React 项目,安装依赖包: 使用 检测当前浏览器语言国际化组件 手动切换国际化语言 总结 本文使用 React-i18next 库结合 React, 介绍如何在 React 中配置使用国际化.官方地址:i18next | react-i18next 简介 react-i18next 是基于 i18next 的一款强大的国际化框架,可以用于 react 和 react-native 应用:react-i18next 特点: 提供多种组件可以在hoc,

  • 一文搞懂redux在react中的初步用法

    Redux是一个数据状态管理插件,当使用React或是vue开发组件化的SPA程序时,组件之间共享信息是一个非常大的问题.例如,用户登陆之后客户端会存储用户信息(ID,头像等),而系统的很多组件都会用到这些信息,当使用这些信息的时候,每次都重新获取一遍,这样会非常的麻烦,因此每个系统都需要一个管理多组件使用的公共信息的功能,这就是redux的作用. 如果你是从来没有接触过redux的开发者,希望您能够有耐心的看一看,我也是看好很多博客慢慢自己总结的!!!!比大佬们一个一个分布找要强一点. imp

  • React中关于render()的用法及说明

    目录 React中的render() 1.render() 2.当 render 被调用时 3.render() 函数应该为纯函数 4.如需与浏览器进行交互 5.在React.Component类 6.在react中触发render的有4条路径 7.生命周期流程图(来源于官网) React render在什么时候会被触发? 总结 React中的render() 1.render() 是 class 组件中唯一必须实现的方法 2.当 render 被调用时 它会检查 this.props 和 th

  • react中常见hook的使用方式

    react中常见hook的使用方式

    1.什么是hook? react hook是react 16.8推出的方法,能够让函数式组件像类式组件一样拥有state.ref.生命周期等属性. 2.为什么要出现hook? 函数式组件是全局当中一个普通函数,在非严格模式下this指向window,但是react内部开启了严格模式,此时this指向undefined,无法像类式组件一样使用state.ref,函数式组件定义的变量都是局部的,当组件进行更新时会重新定义,也无法存储,所以在hook出现之前,函数式组件有很大的局限性,通常情况下都会使

  • react中hook介绍以及使用教程

    前言 最近由于公司的项目开发,就学习了在react关于hook的使用,对其有个基本的认识以及如何在项目中去应用hook.在这篇博客中主要从以下的几个点进行介绍: hook简介 hook中常用api的使用 hook在使用过程中需要去注意的地方 hook中怎样去实现class组件中的声明周期函数 hook 首先介绍关于hook的含义,以及其所要去面对的一些场景 含义:Hook 是 React 16.8 的新增特性.它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性

  • React中10种Hook的使用介绍

    目录 React Hook是什么? React目前提供的Hook 1.useState 2.useEffect & useLayoutEffect 3.useMemo & useCallback 4.useRef 5.useContext 6.useReducer React Hook是什么? React官网是这么介绍的: Hook 是 React 16.8 的新增特性.它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性. 完全可选的 你无需重写任何已有

随机推荐