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);
相关推荐
IT、木易几秒前
大白话React第八章React 深入进阶与实践拓展阶段
javascript·react.js·ecmascript
m0_748232392 分钟前
qwenvl 以及qwenvl 2 模型架构理解
android·前端·后端
冲!!4 分钟前
vue3中ref和reactive响应式数据、ref模板引用(组合式和选项式区别)、组件ref的使用
前端·javascript·vue.js
匹马夕阳6 分钟前
React vs Vue3深度对比与使用场景分析
前端·react.js·前端框架
一路向前的月光7 分钟前
React(11)路由demo
javascript·react.js·ecmascript
七灵微35 分钟前
【前端】简单原生实例合集html,css,js
前端·css·html
祈澈菇凉35 分钟前
2025年React Hooks的进阶面试题130题及其答案解析..
前端·react.js·前端框架
小王码农记35 分钟前
【天地图-点线面最全功能】天地图实现功能:回显、绘制、编辑、删除任意点线面
javascript
Neo Evolution43 分钟前
每天一个Flutter开发小项目 (6) : 表单与验证的专业实践 - 构建预约应用
android·开发语言·前端·javascript·flutter
大橙子房1 小时前
AI学习第六天-python的基础使用-趣味图形
前端·python·学习