如何创建一个非模式的React对话框？

import React from 'react';

const NonModalDialog = () => {
  // 对话框的状态和逻辑
  const [isOpen, setIsOpen] = React.useState(false);

  const openDialog = () => {
    setIsOpen(true);
  };

  const closeDialog = () => {
    setIsOpen(false);
  };

  return (
    <div>
      <button onClick={openDialog}>打开对话框</button>
      {isOpen && (
        <div>
          <h2>非模态对话框</h2>
          <p>这是一个非模态对话框的内容。</p>
          <button onClick={closeDialog}>关闭对话框</button>
        </div>
      )}
    </div>
  );
};

export default NonModalDialog;

import React from 'react';
import NonModalDialog from './NonModalDialog';

const App = () => {
  return (
    <div>
      <h1>我的应用程序</h1>
      <NonModalDialog />
    </div>
  );
};

export default App;