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);
相关推荐
CrabXin几秒前
前端如何用 CDN 加速网站性能全解析
前端
beckyyy1 分钟前
WebSSH的简单实现
前端·ssh
GISer_Jing8 分钟前
透过浏览器原理学习前端三剑客:HTML、CSS与JavaScript
前端·javascript·css·html
长空任鸟飞_阿康11 分钟前
提示词管理器设计:从需求到用户体验的高效落地逻辑
前端·人工智能·ux
零點壹度ideality18 分钟前
鸿蒙实现可以上下左右滑动的表格-摆脱大量ListScroller
前端·harmonyos
林希_Rachel_傻希希20 分钟前
this 的指向与 bind() 方法详解
前端·javascript
Helloworld21 分钟前
掌握 JavaScript 的“变色龙”——this 关键字完全指南
javascript
Komorebi゛22 分钟前
【Vue3】使用websocket实现前后端实时更新数据
前端·websocket
想要狠赚笔的小燕22 分钟前
老项目救星:Vue3/Vite/JS 项目渐进式引入「代码 + Commit」自动化规范全指南(多人协作)
前端·vue.js
用户3521201956028 分钟前
React-router v7(下)
前端