react 中调用子组件方法

一、使用 `ref` 和 `forwardRef`

1. 子组件暴露方法

首先使用`forwardRef`来定义组件,使得组件可以接收`ref`。然后定义了一个`childMethod`方法,并且使用`useImperativeHandle`来将这个方法暴露给父组件。

javascript 复制代码
import { forwardRef, useImperativeHandle } from "react";

const ChildComponent = forwardRef((props, ref) => {

  const childMethod = () => {

    console.log("子组件方法被调用");

  };

  useImperativeHandle(ref, () => ({

    childMethod,

  }));

  return <div>{/* 子组件内容 */}</div>;

});

2. 父组件使用方法

父组件通过`ref`就可以访问到`childMethod`。

javascript 复制代码
import { useRef } from "react";

const ParentComponent = () => {

  const childRef = useRef();

  const handleClick = () => {

    if (childRef.current) {

      childRef.current.childMethod();

    }

  };

  return (

    <div>

      <button onClick={handleClick}>调用子组件方法</button>

      <ChildComponent ref={childRef} />

    </div>

  );

};
相关推荐
coding随想6 分钟前
掌控网页的魔法之书:JavaScript DOM的奇幻之旅
开发语言·javascript·ecmascript
然我34 分钟前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子39 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹42 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器1 小时前
指定阿里镜像原理
前端
枷锁—sha1 小时前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha1 小时前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜1 小时前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
DanB241 小时前
html复习
javascript·microsoft·html
汉得数字平台1 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控