loading改用react hooks

// 子组件
import React, { useState, useEffect } from 'react';
import { Modal } from 'antd';

const ChildComponent = ({ onCancel }) => {
  const [loading, setLoading] = useState(true);

  // useEffect 监听父组件取消事件
  useEffect(() => {
    if (onCancel) {
      setLoading(false);
    }
  }, [onCancel]);

  return (
    <Modal
      title="Your Modal Title"
      visible={true}
      onCancel={() => onCancel()}
      footer={null}
    >
      {/* Modal Content */}
      {loading ? 'Loading...' : 'Modal Content Loaded'}
    </Modal>
  );
};

// 父组件
import React from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const handleCancel = () => {
    // 处理取消事件
    console.log('Cancel clicked!');
  };

  return (
    <div>
      {/* Other parent component content */}
      <button onClick={handleCancel}>Cancel</button>
      <ChildComponent onCancel={handleCancel} />
    </div>
  );
};

export default ParentComponent;