react传递函数与回调函数原理

为什么 React 允许直接传递函数？

回调函数核心逻辑 

 

例子：父组件控制 Modal 的显示与隐藏

// 父组件 (ParentComponent.tsx)
import React, { useState } from 'react';
import { Modal, Button } from 'antd';
import ModalContent from './ModalContent';const ParentComponent = () => {const [visible, setVisible] = useState(false);// 用于关闭 Modal 的回调函数const hideModal = () => setVisible(false);return (<><Button type="primary" onClick={() => setVisible(true)}>新增算子</Button><Modaltitle="新增算子"visible={visible}onCancel={hideModal}  // 关闭 Modal 的回调函数footer={null}  // 自定义 footer 按钮>{/* 将回调函数传递给子组件 */}<ModalContent onClose={hideModal} /></Modal></>);
};export default ParentComponent;

// 子组件 (ModalContent.tsx)
import React from 'react';
import { Button } from 'antd';interface ModalContentProps {onClose: () => void;  // 父组件传递来的回调函数
}const ModalContent: React.FC<ModalContentProps> = ({ onClose }) => {return (<div><p>这是新增算子的内容</p><Button type="primary" onClick={onClose}>确认</Button>  {/* 调用传递来的回调函数 */}<Button onClick={onClose}>取消</Button>  {/* 调用传递来的回调函数 */}</div>);
};export default ModalContent;

 

具体例子

父组件

          <div><Modaltitle="添加算子"open={open}confirmLoading={confirmLoading}onOk={handleOk}onCancel={handleCancel}centered={true}footer={null} // 不使用 Modal 自带的 footer><AddOptsModal onCancel={handleCancel}></AddOptsModal></Modal></div>const [open, setOpen] = useState(false)const handleCancel = () => {setOpen(false)}

 子组件

import { Button } from 'antd'
interface AddOptsModalProps {onCancel: () => void
}const AddOptsModal: React.FC<AddOptsModalProps> = ({ onCancel }) => {return (<div><Button onClick={onCancel}>关闭</Button></div>)
}
export default AddOptsModal