随笔- 123 文章- 0 评论- 9 阅读- 20万

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

问题：

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

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

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

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

父组件

/*

<em id="__mceDel"> * @LastEditors: xxxxx
 * @LastEditTime: 
 * @Description: useRef(null)、ref={childRef}</em>


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<br><br> */<em id="__mceDel">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)
</em>