脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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 用法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 基于Node的React图片上传组件实现实例代码

    基于Node的React图片上传组件实现实例代码

    本篇文章主要介绍了基于Node的React图片上传组件实现实例代码，非常具有实用价值，需要的朋友可以参考下
    2017-05-05
  • react-router-domV6版本改版踩坑记录

    react-router-domV6版本改版踩坑记录

    这篇文章主要介绍了react-router-domV6版本改版踩坑记录,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • 详解React中Fragment的简单使用

    详解React中Fragment的简单使用

    这篇文章主要介绍了详解React中Fragment的简单使用，文中通过示例代码介绍的非常详细，对我们学习React有一定的帮助，感兴趣的小伙伴们可以参考一下
    2022-10-10
  • React Navigation 路由传参的操作代码

    React Navigation 路由传参的操作代码

    这篇文章主要介绍了React Navigation 路由传参,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-08-08
  • React+ts实现二级联动效果

    React+ts实现二级联动效果

    这篇文章主要为大家详细介绍了React+ts实现二级联动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09
  • react-router v6实现权限管理+自动替换页面标题的案例

    react-router v6实现权限管理+自动替换页面标题的案例

    这篇文章主要介绍了react-router v6实现权限管理+自动替换页面标题,这次项目是有三种权限，分别是用户，商家以及管理员，这次写的权限管理是高级权限能访问低级权限的所有页面，但是低级权限不能访问高级权限的页面，需要的朋友可以参考下
    2023-05-05
  • React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析

    React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析

    这篇文章主要介绍了React Native中ScrollView组件轮播图与ListView渲染列表组件用法,结合实例形式详细分析了ScrollView组件轮播图与ListView渲染列表组件具体功能、使用方法与操作注意事项,需要的朋友可以参考下
    2020-01-01
  • 30分钟精通React今年最劲爆的新特性——React Hooks

    30分钟精通React今年最劲爆的新特性——React Hooks

    这篇文章主要介绍了30分钟精通React今年最劲爆的新特性——React Hooks，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • React Hook中的useState函数的详细解析

    React Hook中的useState函数的详细解析

    Hook 就是 JavaScript 函数，这个函数可以帮助你钩入(hook into) React State以及生命周期等特性，这篇文章主要介绍了React Hook useState函数的详细解析的相关资料,需要的朋友可以参考下
    2022-10-10
  • React Hooks之使用useCallback和useMemo进行性能优化方式

    React Hooks之使用useCallback和useMemo进行性能优化方式

    这篇文章主要介绍了React Hooks之使用useCallback和useMemo进行性能优化方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-06-06

最新评论