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);
相关推荐
Mr_Mao14 分钟前
告别选型困难!集 VueUse、ahooks、Mantine 于一身:286 个 Hook 的 ReaUse 来了
前端·javascript·react.js
智鸟科技GemeOpen开发者智能设备30 分钟前
智能插座二次开发如何接入Home Assistant,从零开始完整工程实现(Python+React)
开发语言·python·物联网·react.js·智能家居
泡海椒1 小时前
趋势分析报表:jquick-pdf折线图PDF生成实战
java·大数据·运维·服务器·前端·pdf
默_笙1 小时前
🚙 一条腿走路会摔:ES 关键词检索、混合召回与 ReRank 裁判
前端·javascript
YIAN1 小时前
从跨域代理到 WebSocket:梳理前端实时通信的底层逻辑与完整实践
前端·websocket
一曲终散1 小时前
创建 SVG 图标预览页面:从零实现到解决 CORS 问题
前端
静默回滚2 小时前
iPhone照片电脑上打不开:HEIC解码从原理到WASM
前端
dsyyyyy11012 小时前
Vue 3 Watch 监视完全指南
前端·javascript·vue.js
航飞光电市场经理2 小时前
人员定位系统“全栈自研”技术解析:从射频前端到定位引擎的架构拆解
前端·架构
Apifox2 小时前
Apifox 9 月更新|CLI 能力升级、GitLab 私有化部署接入与产品体验优化
前端·后端·测试