首页 > 其他分享 >react中关于父子组件传值已经方法调用总结

react中关于父子组件传值已经方法调用总结

时间:2023-10-13 12:13:39浏览次数:37  
标签:console props react import 组件 const 传值

问题:

1、封装自定义组件后,父子组件的传值与方法调用则是必须进行的操作,但是在网上看到多种的方法后,

  • 有的方法一个组件下好使,但是换一个组件后就不好用了
  • 有的方法根本就不好使,不知道是什么原因

2、父子组件之间的传值都是用props这个毫无疑问,也没有什么问题

3、父子组件方法调用则是上面提到的问题了,最终找到了一个使用方法,解决的我遇到的问题

父组件

/*
 * @LastEditors: xxxxx
 * @LastEditTime: 
 * @Description: useRef(null)、ref={childRef}
 */

import React, { useRef, useState } from 'react' import { Button, Modal, Popconfirm, Table, Tabs } from 'antd' import type { ColumnsType } from 'antd/es/table' import DetailModal from './add' import './index.scss' const App: React.FC = () => { const childRef: any = useRef(null) const getSubmitList = item => { // 子组件信息 // console.log('子组件信息', item) console.log('子组件信息', childRef) childRef?.current?.onclick() } return ( <> <Button type='primary' className='add-btn' onClick={getSubmitList}> 新增菜单 </Button> <DetailModal msg={'open'} ref={childRef} /> </> ) } export default App

 

子组件

/*
 * @LastEditors: xxxxx
 * @LastEditTime: 
 * @Description: 父组件传值:props, 父组件调用子组件方法: forwardRef, useImperativeHandle

*/
import { Button, Checkbox, Col, Form, Radio, Rate, Row, Select, Space } from 'antd'
import { forwardRef, useImperativeHandle } from 'react'
 
 
const App = (props, ref) => {
  console.log('msg', props.msg)
  useImperativeHandle(ref, () => ({
    onclick,
  }))
  const onclick = () => {
    console.log('Received values of form: ')
  }
   
  return (
    <>
      <Form>
      </Form>
    </>
  )
}
 
export default forwardRef(App)

  

标签:console,props,react,import,组件,const,传值
From: https://www.cnblogs.com/lxl0419/p/17761790.html

相关文章

  • 「UI开发」DevExpress WPF Pivot Grid组件可轻松实现多维数据分析!(一)
    DevExpressWPF PivotGrid组件是一个类似excel的数据透视表,用于多维数据分析和跨选项卡报表生成。众多的布局自定义选项让您完全控制其UI,以用户为中心的功能使其更易于部署。P.S:DevExpressWPF拥有120+个控件和库,将帮助您交付满足甚至超出企业需求的高性能业务应用程序。通过De......
  • react hooks定时器,值增1
    使用函数式更新的方法实现定时器的代码:importReact,{useState,useEffect}from'react';functionApp(){const[count,setCount]=useState(0);useEffect(()=>{consttimer=setInterval(()=>{//使用函数式更新,接收先前的state,并返回一个更......
  • 【HarmonyOS】低代码平台组件拖拽使用技巧之堆叠容器
    ​【关键字】HarmonyOS、低代码平台、组件拖拽、堆叠组件 1、写在前面从本篇开始,我们一起来学习一下低代码平台中组件的托拉拽,虽然组件拖拽十分简单,但实际上还是有一定的技巧,新手上路难免会遇到一定的问题,如果能熟练掌握拖拽的技巧,能够有效地提升咱们的开发效率哦,今天我们先......
  • 【HarmonyOS】低代码平台组件拖拽使用技巧之滚动容器
    ​【关键字】HarmonyOS、低代码平台、组件拖拽、滚动容器 1、写在前面上一篇中我们介绍了低代码平台组件库中的堆叠容器的一些拖拽技巧,本篇我们继续,今天带大家一些来看一个新的组件——滚动容器。关于滚动容器的直接使用其实很简单,所以这个不是今天的重点,今天的重点是如何在......
  • vue动态引入组件
    vue动态引入组件,正常情况是页面渲染时动态加载该页面组件,还能进行细化动态加载情况,比如弹窗组件动态导入:除了路由懒加载,你还可以在其他地方使用动态导入来按需加载组件。例如,在某个按钮的点击事件中异步加载一个组件:import('./components/MyComponent.vue').then((module)=>{......
  • 天合光能组件质量怎么样?至尊组件双面增益达8.82%,高可靠性再获验证
     近日,第三方权威检测认证机构鉴衡进行的极端气候户外实证报告出炉:天合光能至尊600W+系列组件在张北常年多风天气下,运行表现优异,EL图像无缺陷,与至尊600W+单面组件相比,双面组件发电增益高达8.82%。再度证实至尊组件应用于常年大风地区光伏电站的卓越可靠性,用品质护航客户价值。......
  • .NET5_Log4Net组件使用
    一、NUGet引入程序集:log4Net+Microsoft.Extensions.Logging.Log4Net.AspNetCore二、准备配置文件 三、配置使用Log4Net记录日志......
  • react native使用zustand进行状态管理
    1.安装:#NPMnpminstallzustand#Yarnyarnaddzustand2.创建store:import{create}from"zustand";constuseStore=create((set)=>({count:0,str:"",addCount:()=>set((state)=>({count:state.count+1})......
  • React, chartGpt写的换肤方法
    constthemes={default:{backgroundColor:'white',textColor:'black',fontSize:'16px',},dark:{backgroundColor:'black',textColor:'white',fontSize:'18px'......
  • HarmonyOS/OpenHarmony原生应用-ArkTS万能卡片组件Toggle
    组件提供勾选框样式、状态按钮样式及开关样式。该组件从APIVersion8开始支持。仅当ToggleType为Button时可包含子组件。一、接口Toggle(options:{type:ToggleType,isOn?:boolean})从APIversion9开始,该接口支持在ArkTS卡片中使用。参数:ToggleType枚举说明从APIversion9......