react ts 父组件调用子组件方法,父子通信

子组件

GlobalTableWapper:css 盒子
IProps, ChildMethods:字段类型

import React, { forwardRef, memo, useEffect, useImperativeHandle, useState } from 'react'
import type { FC } from 'react'

import { GlobalTableWapper } from './style'
import { Pagination, Table } from 'antd'
import { IProps, ChildMethods } from './type'

const GlobalBox: FC<IProps> = forwardRef<ChildMethods, IProps>((props, ref) => {
  console.log(props, 'props');
  const { columns, height = 'calc(100vh - 210px)', initData, form = {} } = props
  const [tableConfig, setTableConfig] = useState<any>({
    total: 0,
    list: []
  });

  useEffect(() => {
    if (!tableConfig?.list.length) {
      initTable(form)
    }
  }, [])

  const initTable = async (form: object = {}) => {
    try {
      const { code, data } = await initData(form)
      if (code === 1) {
        setTableConfig(data)
      }
    } catch (error) {
      console.log('watch-table-error', error);
    }
  }

  // 将要暴露给父组件调用的方法,通过 useImperativeHandle 进行封装
  useImperativeHandle(ref, (): any => ({
    initTable: (form: object) => initTable(form)
  }));

  return (
    <GlobalTableWapper style={{ height: height }}>
      <Table columns={columns} dataSource={tableConfig.list.map((item: any) => ({ ...item, key: item.id }))} className="mt-20 table-height-pagination table-container" pagination={false} />
      <Pagination
        className='pagination-container flex-center'
        total={tableConfig?.total ?? 0}
        showSizeChanger
        showQuickJumper
        showTotal={(total) => `共 ${total} 条`}
      />
    </GlobalTableWapper>
  )
});

GlobalBox.displayName = 'GlobalBox'
export default memo(GlobalBox)

父组件使用

// 类型
import { ChildMethods } from '@/components/GlobalTableUi/type';

const tableRef = createRef<ChildMethods>()
// 方法使用
const getTableData = (data: object) => {
  tableRef.current?.initTable(data)
}
// 样式
<GlobalTableUi ref={tableRef} columns={columns} initData={postLiveRoomScriptPageList} />

type.ts

import type { ReactNode } from 'react'

export interface IProps {
  readonly ref?: any;
  readonly columns: Array<any>,
  readonly height?: number,
  form?: object,
  initData?: Function,
  children?: ReactNode,
}

export interface ChildMethods {
  initTable: (form: object) => void;
}
posted @   DL·Coder  阅读(343)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
历史上的今天:
2022-07-28 JS 设置 CSS 属性
2022-07-28 JS 获取 DOM 元素
2022-07-28 vue 导航守卫(路由守卫)
2022-07-28 vue 子改变父的值(.sync)
2022-07-28 vue 框选
2022-07-28 jsplumb 删除端点到端点的连线
点击右上角即可分享
微信分享提示