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);
相关推荐
郭邯几秒前
用 AI 辅助开发一个文件大小转换工具:从需求到上线的完整过程
前端
勾勾圈圈蛋蛋2 分钟前
前中台项目
前端
触底反弹7 分钟前
🔐 前端鉴权不再难!手把手带你搞懂 JWT + Zustand + Axios 的完整登录方案
前端·axios
打呵欠的猫33 分钟前
我用 AI 写了一个"需求翻译器",产品的 PRD 直接变成开发任务清单
前端·ai编程
fatcoder33 分钟前
玩转Nginx 09 — 运维排障:三场"火灾"实战演练
前端·后端·nginx
前端玩坑坑33 分钟前
View Transitions API 入门教程,优雅过度
前端
李高钢1 小时前
WPF MVVM Light(三):RelayCommand 命令与 Messenger 消息
前端·c#·wpf
lichenyang4531 小时前
Socket.IO 原理与技术选型
前端
qq21084629531 小时前
在python中什么是 self 和 cls?
开发语言·前端·python
我会冲击波1 小时前
vibe coding 一个多月,我把 Claude Code + Pi 做成了桌面 IDE,还给它移植了 VS Code 的编辑体验
前端·javascript·后端