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
相关推荐
山有木兮木有枝_3 分钟前
JavaScript 设计模式--单例模式
前端·javascript·代码规范
一大树17 分钟前
Vue3 开发必备:20 个实用技巧
前端·vue.js
颜渊呐22 分钟前
uniapp中APPwebview与网页的双向通信
前端·uni-app
10年前端老司机34 分钟前
React 受控组件和非受控组件区别和使用场景
前端·javascript·react.js
夏晚星35 分钟前
vue实现微信聊天emoji表情
前端·javascript
停止重构37 分钟前
【方案】前端UI布局的绝技,响应式布局,多端适配
前端·网页布局·响应式布局·grid布局·网页适配多端
極光未晚37 分钟前
TypeScript在前端项目中的那些事儿:不止于类型的守护者
前端·javascript·typescript
ze_juejin38 分钟前
Vue3 + Vite + Ant Design Vue + Axios + Pinia 脚手架搭建
前端·vue.js
Rrvive39 分钟前
原型与原型链到底是什么?
javascript
lichenyang45340 分钟前
React项目(移动app)
前端