Material UI对话框从内部组件关闭对话框

import React, { useState } from 'react';

function MyDialog() {
  const [isOpen, setIsOpen] = useState(false);
  
  // 其他组件代码
  
  return (
    <div>
      {/* 对话框触发按钮 */}
      <button onClick={() => setIsOpen(true)}>打开对话框</button>
      
      {/* 对话框组件 */}
      {isOpen && (
        <Dialog>
          {/* 对话框内容 */}
          
          {/* 内部组件 */}
        </Dialog>
      )}
    </div>
  );
}

function InternalComponent({ onClose }) {
  // 其他组件代码
  
  return (
    <div>
      {/* 关闭对话框按钮 */}
      <button onClick={onClose}>关闭对话框</button>
      
      {/* 其他组件内容 */}
    </div>
  );
}

function MyDialog() {
  const [isOpen, setIsOpen] = useState(false);
  
  const handleClose = () => {
    setIsOpen(false);
  };
  
  return (
    <div>
      {/* 对话框触发按钮 */}
      <button onClick={() => setIsOpen(true)}>打开对话框</button>
      
      {/* 对话框组件 */}
      {isOpen && (
        <Dialog>
          {/* 对话框内容 */}
          <InternalComponent onClose={handleClose} />
        </Dialog>
      )}
    </div>
  );
}