脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React forwardRef 用法

React forwardRef 用法案例分析

 更新时间：2023年06月29日 11:13:34   作者：一颗不甘坠落的流星  
这篇文章主要介绍了React forwardRef用法,forwardRef允许你的组件使用ref将一个DOM节点暴露给父组件，本文结合案例分析给大家讲解的非常详细，需要的朋友可以参考下

React.forwardRef 会创建一个React组件，这个组件能够将其接受的 ref 属性转发到其组件树下的另一个组件中。这种技术并不常见，但在以下两种场景中特别有用：

  • 转发 refs 到 DOM 组件
  • 在高阶组件中转发 refs

本文重点介绍下React forwardRef 用法。

用法

forwardRef：允许你的组件使用 ref 将一个 DOM 节点暴露给父组件。

import { forwardRef } from 'react';
const MyInput = forwardRef((props, ref) => {
  // ...
});

案例分析：ref 属性是 React 的特殊属性，不能直接使用。

import {useRef} from 'react'
function InputCom({ref}) {
  return (
    <input type='text' ref={ref} />
  )
}
function App() {
  const inpRef = useRef(null)
  const focus = () => {
    inpRef.current?.focus()
  }
  return (
    <>
      <InputCom ref={inpRef} />
    </>
  )
}

上面就会弹出报错信息：

Warning: InputCom: `ref` is not a prop. Trying to access it will result in `undefined` being returned. 
If you need to access the same value Within the child component, you should pass it as a company's prop.
// 警告:InputCom: 'ref不是一个prop。试图访问它将导致返回undefine。如果你需要在子组件中访问相同的值，你应该把它作为公司的prop传递。

如果想传递 ref，这时候就要借助 forwardRef 函数

import { forwardRef, useRef } from "react";
const InputCom = forwardRef((props, ref) => {
  return <input type="text" ref={ref} />;
});
export default function ProRef() {
  const inpRef = useRef(null);
  const focus = () => {
    inpRef.current?.focus();
  };
  return (
    <>
      <InputCom ref={inpRef} />
      <button onClick={focus}>focus</button>
    </>
  );
}

到此这篇关于React forwardRef 用法的文章就介绍到这了,更多相关React forwardRef 用法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 如何在React项目中优雅的使用对话框

    如何在React项目中优雅的使用对话框

    在项目中,对话框和确认框是使用频率很高的组件,下面这篇文章主要给大家介绍了关于如何在React项目中优雅的使用对话框的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-05-05
  • 深入浅析React中diff算法

    深入浅析React中diff算法

    React 最为核心的就是 Virtual DOM 和 Diff 算法，diff算法的基础是Virtual DOM，接下来通过本文给大家介绍React中diff算法的相关知识，对React中diff算法感兴趣的朋友跟随小编一起学习下吧
    2021-05-05
  • React实现图片懒加载的常见方式

    React实现图片懒加载的常见方式

    图片懒加载是一种优化网页性能的技术,它允许在用户滚动到图片位置之前延迟加载图片,通过懒加载,可以在用户需要查看图片时才加载图片,避免了不必要的图片加载,本文给大家介绍了React实现图片懒加载的常见方式,需要的朋友可以参考下
    2024-01-01
  • React18新增特性released的使用

    React18新增特性released的使用

    本文主要介绍了React18新增特性released的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-05-05
  • React中CSS模块冲突的问题及解决

    React中CSS模块冲突的问题及解决

    本文将探讨 React 中 CSS 模块冲突的常见原因,并提供解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-03-03
  • react+antd树选择下拉框中增加搜索框

    react+antd树选择下拉框中增加搜索框

    这篇文章主要介绍了react+antd树选择下拉框中增加搜索框方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-06-06
  • React使用Ant Design方式(简单使用)

    React使用Ant Design方式(简单使用)

    文章介绍了AntDesign组件库,它是基于AntDesign设计体系的ReactUI组件库,主要用于研发企业级中后台产品,文章详细讲解了如何下载和按需引入antd组件库,并通过一个小案例展示了如何使用antd进行布局和改造,最后,文章提醒大家在使用过程中可以参考官网的属性介绍
    2024-11-11
  • ReactNative支付密码输入框实现详解

    ReactNative支付密码输入框实现详解

    这篇文章主要为大家介绍了ReactNative支付密码输入框实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-11-11
  • 在React中使用SVG的几种方式

    在React中使用SVG的几种方式

    在React中,SVG（Scalable Vector Graphics）的使用非常普遍,因为它们提供了可伸缩的矢量图形,这对于现代Web应用来说是非常重要的,以下是几种常见的在React中使用SVG的方法,每种方法都有其特定的用例和最佳实践,需要的朋友可以参考下
    2024-11-11
  • react脚手架如何配置less和ant按需加载的方法步骤

    react脚手架如何配置less和ant按需加载的方法步骤

    这篇文章主要介绍了react脚手架如何配置less和ant按需加载的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11

最新评论