react v-18父组件调用子组件的方法和数据

版本

javascript 复制代码
"react": "^18.1.0",
"react-dom": "^18.1.0",

父组件

javascript 复制代码
import React, { useState, useRef, memo, useEffect } from "react";
import { useTranslation } from "react-i18next";
import { Card } from "antd";

import Childdren from './child/child';
function Dashboard() {
  let childRef:any = useRef(null);
  const handleClick = () => {
     console.log('子组件:', childRef.current)  //打印:{num: 999, add: ƒ}
    childRef.current.add() //调用
  }
  return (
        <Card style={{ minHeight: "calc(100vh - 64px)" }}>
            <Childdren ref={childRef} title={'我是父组件的数据'} num={123} fun={() => alert('传递了一个函数')} />
            
            <button onClick={handleClick}>父组件调子组件方法</button>
        </Card>
  );
}

export default Dashboard;

子组件 (通过useImperativeHandle() 抛出)

javascript 复制代码
// props (类组件则使用this.props)
import React, { useImperativeHandle } from "react";
const Childdren = React.forwardRef((props:any, ref) => {
  useImperativeHandle(
    ref,
    () => ({ add,num }) //父组件通过ref获取值,要在这里抛出
  );
  const num = 999;
  const add = () => {
    console.log('我是子组件方法')
  };
  return (
    <div>
      <h1>父传子:{props.title}</h1>
      <button >这是子组件</button>
      
    </div>
  );
});
export default Childdren;
相关推荐
也无晴也无风雨1 小时前
深入剖析输入URL按下回车,浏览器做了什么
前端·后端·计算机网络
Martin -Tang2 小时前
Vue 3 中,ref 和 reactive的区别
前端·javascript·vue.js
FakeOccupational3 小时前
nodejs 020: React语法规则 props和state
前端·javascript·react.js
小牛itbull3 小时前
ReactPress:构建高效、灵活、可扩展的开源发布平台
react.js·开源·reactpress
放逐者-保持本心,方可放逐3 小时前
react 组件应用
开发语言·前端·javascript·react.js·前端框架
曹天骄4 小时前
next中服务端组件共享接口数据
前端·javascript·react.js
阮少年、4 小时前
java后台生成模拟聊天截图并返回给前端
java·开发语言·前端
郝晨妤6 小时前
鸿蒙ArkTS和TS有什么区别?
前端·javascript·typescript·鸿蒙
AvatarGiser6 小时前
《ElementPlus 与 ElementUI 差异集合》Icon 图标 More 差异说明
前端·vue.js·elementui
喝旺仔la6 小时前
vue的样式知识点
前端·javascript·vue.js