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>

  );

};
相关推荐
小小爱大王29 分钟前
AI 编码效率提升 10 倍的秘密:Prompt 工程 + 工具链集成实战
java·javascript·人工智能
半生过往29 分钟前
2025 前端动效实战指南:Vue Bits & React Bits 深度拆解(功能 / 复用 / 高频问题处理)
前端·vue.js·react.js
程序员包打听32 分钟前
Vitest 4.0 重磅发布:Browser Mode 正式稳定,前端测试进入新纪元
前端
BumBle33 分钟前
UniApp 多页面编译优化:编译时间从10分钟到1分钟
前端
星链引擎36 分钟前
大语言模型的技术突破与稳定 API 生态的构建
前端
还是大剑师兰特37 分钟前
TypeScript 面试题及详细答案 100题 (71-80)-- 模块与命名空间
前端·javascript·typescript
BumBle37 分钟前
使用 SortableJS 实现vue3 + Element Plus 表格拖拽排序
前端·vue.js·element
玉宇夕落37 分钟前
HTML5 音乐敲击乐静态界面
前端
海在掘金6112737 分钟前
告别"拼写错误":TS如何让你的代码"字字精准"
前端
用户479492835691538 分钟前
什么是XSS攻击,怎么预防,一篇文章带你搞清楚
前端·javascript·安全