react子组件向父组件传递数据和父组件向子组件传递数据的正确写法和函数互相调用

存在伪代码,自行解决

父组件 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;