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

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

回调函数核心逻辑

复制代码
// 父组件 (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
相关推荐
满分观察网友z6 分钟前
别小看这个滑动条!从性能灾难到用户挚爱的 uni-app Slider 踩坑实录
前端
满分观察网友z9 分钟前
别再裸写<textarea>了!一个“小”功能,我用上了它几乎所有API
前端
bemyrunningdog10 分钟前
二进制权限控制方案
javascript·react.js·ecmascript
西西木科技丨Shopify开发机构15 分钟前
如何在 Shopify 中建立重定向
前端·html
汪子熙21 分钟前
深入探析 header facets:定位与应用
前端·javascript
你听得到1123 分钟前
从需求到封装:手把手带你打造一个高复用、可定制的Flutter日期选择器
前端·flutter
江城开朗的豌豆27 分钟前
Vue Router vs location.href:导航跳转的正确姿势,你选对了吗?
前端·javascript·vue.js
小磊哥er32 分钟前
【前端工程化】如何制定前端项目中的页面模版?
前端
Liudef0635 分钟前
基于HTML与Java的简易在线会议系统实现
java·前端·html
2401_8812444037 分钟前
javaweb———html
前端·javascript·html