问题:
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