存在伪代码,自行解决

父组件 App：

import React, { useState, useEffect } from 'react';
import { Col, Row, Space, Table, Switch, Tag, Button } from 'antd';
import Qs from 'qs';const App: React.FC = () => {//父组件传数据到子组件函数const [opne, setOpen] = useState<boolean>(false);const tj1 = () => {setOpen(true)console.log("添加",opne);}// 子组件向父组件传递数据的回调函数const handleChildDataChange = (data: string) => {console.log('子组件传递的数据:', data);};return (<>{/* 父组件内容 */}<Button onClick={tj1 }>Send Data to Parent</Button>{/* 将回调函数传递给子组件 */}<USERTJ message={opne} onChildDataChange={handleChildDataChange} /></>);
};
export default App;

子组件 USERTJ：

import React, { useState } from 'react';
import { Button, Modal } from 'antd';
//定义类型
interface ChildProps {message: boolean,onChildDataChange: (data: string) => void;
}const USERTJ: React.FC<ChildProps> = ({ message, onChildDataChange }) => {console.log('来自父组件来的数据', message);// 子组件向父组件传递数据const handleInputChange = () => {onChildDataChange('Data from child component');};return (<>{/* 子组件内容 */}<Button onClick={handleInputChange}>Send Data</Button></>);
};export default USERTJ;

子组件和父组件的函数互相调用

父组件:

import React, { useRef, useState, useEffect } from 'react';
import { Col, Row, Space, Table, Switch, Tag, Button } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { getDateFormatt } from "@/util/date"import Qs from 'qs'
//查询用户列表
import { SysUser } from "@/request/api"
import "./user.less"
import USERTJ, { ChildComponentRef } from "@/components/user"const App: React.FC = () => {const childRef = useRef<ChildComponentRef>(null);// 子组件向父组件传递数据的回调函数const handleChildDataChange = (data: string) => {console.log('子组件传递的数据:', data);};//调用子组件的函数const tychildFunction= (data: string) => {if (childRef.current) {childRef.current.childFunction(); // 调用子组件的函数}};return (<><Button type="primary" onClick={tychildFunction}>调用子组件</Button>{/* 弹窗 */}{/* 将回调函数传递给子组件 */}<USERTJ ref={childRef} onChildDataChange={handleChildDataChange} /></>)};
export default App;

子组件

import React, { useState, forwardRef, useImperativeHandle, ForwardedRef } from 'react';
import { Button, Modal } from 'antd';
interface ChildProps {// 定义子组件的其他属性onChildDataChange: (data: string) => void;}
export interface ChildComponentRef {childFunction: () => void;
}const USERTJ = forwardRef<ChildComponentRef, ChildProps>((props, ref: ForwardedRef<ChildComponentRef> ) => {//从props取出父组件的onChildDataChange 函数,让子组件调用const { onChildDataChange } = props;const handleInputChange = () => {// 子组件向父组件传递数据onChildDataChange('Data from child component');};const childFunction = () => {console.log('子组件函数被调用');};// 将子组件的函数暴露给父组件通过 ref 获取useImperativeHandle(ref, () => ({childFunction,}));return (<><Button type="primary" onClick={handleInputChange}>调用父组件</Button></>);
});
export default USERTJ;