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>

      <Modal
        title="新增算子"
        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>
            <Modal
              title="添加算子"
              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