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>

  );

};
相关推荐
一一一8719 分钟前
javaScript数据存储, 对象和原型与原型链
javascript
Dolphin_海豚21 分钟前
electron windows 无边框窗口最大化时的隐藏边框问题
前端·electron·api
梦想CAD控件24 分钟前
WEB CAD与Mapbox结合实现在线地图和CAD编辑(CGCS2000)
前端·javascript·vue.js
WTSolutions1 小时前
Excel 转 JSON by WTSolutions API 文档
javascript
AverageJoe19911 小时前
一次vite热更新不生效问题排查
前端·debug·vite
努力只为躺平1 小时前
🔥 油猴脚本开发指南:从基础API到发布全流程
前端·javascript
bitbitDown1 小时前
我用Playwright爬了掘金热榜,发现了这些有趣的秘密... 🕵️‍♂️
前端·javascript·vue.js
陈随易1 小时前
VSCode v1.102发布,AI体验大幅提升
前端·后端·程序员
ma771 小时前
JavaScript 获取短链接原始地址的解决方案
前端