為什么 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

?