在react中关闭模式窗口

在React中关闭模态窗口可以通过以下步骤实现：

首先，确保你已经在React项目中引入了React和ReactDOM库。
在你的组件中，创建一个状态变量来控制模态窗口的显示与隐藏。可以使用useState钩子函数来创建这个状态变量。

import React, { useState } from 'react';

function MyComponent() {
  const [showModal, setShowModal] = useState(false);

  // 其他组件代码...

  return (
    <div>
      {/* 模态窗口内容 */}
      {showModal && (
        <div className="modal">
          <div className="modal-content">
            <h2>模态窗口标题</h2>
            <p>模态窗口内容</p>
            <button onClick={() => setShowModal(false)}>关闭</button>
          </div>
        </div>
      )}

      {/* 触发打开模态窗口的按钮 */}
      <button onClick={() => setShowModal(true)}>打开模态窗口</button>
    </div>
  );
}

export default MyComponent;

在上面的代码中，我们使用useState钩子函数创建了一个名为showModal的状态变量，并将其初始值设置为false。当点击打开模态窗口的按钮时，我们将showModal的值设置为true，从而显示模态窗口。模态窗口的内容包含在一个条件渲染中，只有当showModal为true时才会显示。