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);
相关推荐
Ticnix5 小时前
ECharts初始化、销毁、resize 适配组件封装(含完整封装代码)
前端·echarts
纯爱掌门人5 小时前
终焉轮回里,藏着 AI 与人类的答案
前端·人工智能·aigc
twl5 小时前
OpenClaw 深度技术解析
前端
崔庆才丨静觅5 小时前
比官方便宜一半以上!Grok API 申请及使用
前端
星光不问赶路人5 小时前
vue3使用jsx语法详解
前端·vue.js
天蓝色的鱼鱼5 小时前
shadcn/ui,给你一个真正可控的UI组件库
前端
布列瑟农的星空5 小时前
前端都能看懂的Rust入门教程(三)——控制流语句
前端·后端·rust
Mr Xu_5 小时前
Vue 3 中计算属性的最佳实践:提升可读性、可维护性与性能
前端·javascript
jerrywus5 小时前
我写了个 Claude Code Skill,再也不用手动切图传 COS 了
前端·agent·claude
玖月晴空5 小时前
探索关于Spec 和Skills 的一些实战运用-Kiro篇
前端·aigc·代码规范