当前位置：首页 > article >正文

React中forwardRef()的作用？

article 2024/9/20 7:39:07

文章目录

前言
一、forwardRef( )有啥用？
二、使用步骤
- 1.不分模块组件调用
- 2.分模块组件调用
总结

前言

react中forwardRef()的基本使用,这里我只是列举了我自己开发时使用的方法，也可以使用该hook来获取dom节点的转发，来操作dom(本文就不详细说，就简单介绍了通过这个hook来调用各个独立组件的方法)

一、forwardRef( )有啥用？

在React中，forwardRef 是一个非常有用的高阶组件（HOC），它允许你将 ref 自动地通过组件传递给子组件。这在你需要直接访问 DOM 节点或组件实例时特别有用

二、使用步骤

这个通常和useRef()来配合使用，下面我们来使用forwardRef() 来实现函数式组件中获取实例来调用组件中的方法。（尤其是在使用函数组件时，因为函数组件没有实例，且默认情况下不接收 refs。）

1.不分模块组件调用

代码如下（示例）：

import { useImperativeHandle } from "react";
import { useRef, forwardRef } from "react";

//子组件Son
const Son = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    // 暴露的方法
    sayHello() {
      console.log("我被父组件调用了");
    },
  }));
  return <div>son</div>;
});

// 父组件App
function App() {
  const appRef = useRef(null);
  const handleClick = () => {
    appRef.current.sayHello();
  };
  return (
    <>
      <Son ref={appRef} />
      <button onClick={handleClick}>我想调用子组件中的方法</button>
    </>
  );
}

export default App;

2.分模块组件调用

代码如下（示例）：App组件的代码

import { useRef, forwardRef } from "react";

//引入子组件Son
import Son from "./pages/Son";
// 父组件App
function App() {
  // 创建ref对象
  const appRef = useRef(null);
  // 触发Son组件中的sayHello()方法
  const handleClick = () => {
    appRef.current.sayHello();
  };
  return (
    <>
    	// 绑定ref
      <Son ref={appRef} />
      <button onClick={handleClick}>我想调用子组件中的方法</button>
    </>
  );
}

export default App;

代码如下（示例）：Son组件的代码（useImperativeHandle 使用了这个hook来暴露方法）

import { forwardRef } from "react";
import { useImperativeHandle } from "react";
// eslint-disable-next-line react/display-name
const Son = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    // 暴露的方法
    sayHello() {
      console.log("我被父组件调用了");
    },
  }));
  return <div>son</div>;
});

export default Son;