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

tiger_angel

已于 2023-07-09 12:22:28 修改

阅读量1.1k

点赞数

文章标签： javascript 前端 react.js

于 2023-07-09 11:36:21 首次发布

本文链接：https://blog.csdn.net/qq_38567039/article/details/131620976

版权

该文章展示了在React中如何使用useState和函数来实现父组件向子组件传递数据，以及通过回调函数和ref实现子组件向父组件传递数据和调用子组件的方法。主要涉及的状态管理和组件通信技术包括回调函数、React的ref以及forwardRef。

摘要由CSDN通过智能技术生成

存在伪代码,自行解决

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