react函数式组件ref形式子向父传参

父组件引入useRef

javascript 复制代码
 import { useState, useEffect, useContext, useRef } from 'react';
 const sonRef = useRef(null)
html 复制代码
return (
    <div>
        <Son ref={sonRef} onClick={handleClickO} count={count}></Son>
     </div>
       
);

function handleClickO(e) {

console.log(e, 'eeeeeeeeeeeeee');

console.log(sonRef, 'sonRef');

}

子组件触发

javascript 复制代码
import { useImperativeHandle, forwardRef } from "react";
function Son(params, ref) {
    const childFunction = () => {
        console.log('子组件函数被调用');
    };

    // 将子组件的函数暴露给父组件通过 ref 获取
    useImperativeHandle(ref, () => ({
        childFunction,
    }));

    return (
        <div>
            {params.count}
            <button>
                Clicked {count} Son times
            </button>
        </div>
    )
}
export default forwardRef(Son);
相关推荐
CCYe、4 分钟前
限流与配额:企业AI网关的工程实践
前端·人工智能
看谷秀12 分钟前
arkts- 6 手势/沉浸式/深浅色/性能/组件补充/访问/js交互/通知/Native交互
前端·arkts
划船不慎掉水顺便摸鱼14 分钟前
TipTap 不是编辑器,是编辑器构造器:ProseMirror 模型驱动的富文本架构
前端
小高00720 分钟前
🔥🔥🔥TypeScript 7 正式版来了:别只看 10 倍速度,这 4 个迁移坑更值得注意
前端·javascript·面试
凉茶社24 分钟前
shadcn/ui 默认改用 Base UI,Radix 被放弃了吗?
前端
Vuji26 分钟前
ReAct 与 Plan-Execute:两种 Agent 范式的实战对比
前端·agent
用户615958680002227 分钟前
从零原生搭建一个微前端简易框架
前端
小月土星29 分钟前
React + TypeScript 企业级开发实战:从类型约束到组件设计
前端
沙洲35 分钟前
Vite 环境变量终极指南:从原理到企业级实战
前端
刘婉晴42 分钟前
【Web漏洞】SQL 注入实战技巧
前端·数据库·sql