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);
相关推荐
创新技术阁27 分钟前
FastapiAdmin 系统日志体系与核心配置参数详解
前端·后端·fastapi
掘金酱28 分钟前
【社区公告】签到与矿石奖励解耦说明
前端
promiseThen30 分钟前
LWC Workflow:用 7 个 Cursor Skill 搭一条 AI 协作开发流水线
前端·ai编程
一个游离的指针1 小时前
函数管道:消除深度嵌套调用
前端·javascript
浅诺1 小时前
Nginx sub_filter 的“幽灵陷阱”:为什么页面能打开,懒加载的 JS 却全是 404?
前端
PBitW1 小时前
为什么vite中TS报错,可以继续运行?Webpack不行?
前端·webpack·typescript·vite
光影少年1 小时前
react navite手写 FlatList 优化配置
前端·react native·react.js
曹牧1 小时前
C#:文本文件读取
服务器·前端·c#
柚yuzumi1 小时前
前端优化,从少触发一次开始:防抖与节流
前端·javascript
默_笙2 小时前
🚤 CSS 布局的"圈地运动":BFC 就是浏览器的独立领地
前端·javascript