React自定义模态框关闭功能失效问题求助

核心问题分析 #

1. App组件逻辑冲突：前面的if (!buttonActive)/else if (buttonActive)已经直接返回组件，后面的if (modActive)/else if (!modActive)永远不会执行，关闭模态框的状态更新根本触发不了组件切换回按钮。
2. 子组件状态冗余+异步传递错误：Button和Modal里自己维护的btnActive/modalActive完全多余，而且调用setState后立即传当前状态值——React的setState是异步的，传的是更新前的旧值，导致父组件收到的状态完全不对。
3. 状态重复定义：buttonActive和modActive是互斥关系，用一个状态就能控制显示逻辑，没必要搞两个。

修改后的代码 #

App.js

import React, { useState } from "react";
import Button from "./UI/Button";
import Modal from "./UI/Modal";

const App = () => {
  // 用一个状态控制模态框显示/隐藏，初始为隐藏
  const [isModalOpen, setIsModalOpen] = useState(false);

  // 打开模态框的回调
  const openModalHandler = () => {
    setIsModalOpen(true);
  };

  // 关闭模态框的回调
  const closeModalHandler = () => {
    setIsModalOpen(false);
  };

  return (
    <div className="App">
      {/* 根据状态切换显示按钮或模态框 */}
      {isModalOpen ? (
        <Modal onClose={closeModalHandler} />
      ) : (
        <Button onClick={openModalHandler} />
      )}
    </div>
  );
};

export default App;

Button.js

import React from "react";
import btns from "./Button.module.css";

const Button = (props) => {
  // 移除本地冗余状态，直接触发父组件传递的点击回调
  const btnHandler = () => {
    props.onClick();
  };

  return (
    <button className={btns.button} type="button" onClick={btnHandler}>
      Click to open modal
    </button>
  );
};

export default Button;

Modal.js

import React, { Fragment } from "react";
import modal from "./Modal.module.css";
import btns from "./Button.module.css";

const Modal = (props) => {
  // 移除本地冗余状态，关闭时直接调用父组件的关闭回调
  const closeBtnHandler = () => {
    props.onClose();
  };

  return (
    <Fragment>
      <div className={modal.backdrop}></div>
      <div className={modal.modal}>
        <header className={modal.header}>
          <h2>Modal Heading</h2>
        </header>
        <div className={modal.content}>
          <p>Modal body..</p>
        </div>
        <footer className={modal.actions}>
          <button type="button" className={btns.button} onClick={closeBtnHandler}>
            Close
          </button>
        </footer>
      </div>
    </Fragment>
  );
};

export default Modal;

修改说明 #

1. 简化状态管理：用单一状态isModalOpen控制按钮和模态框的切换，避免状态冲突和冗余。
2. 遵循单向数据流：子组件只负责UI渲染和触发父组件回调，状态统一由父组件管理，逻辑更清晰。
3. 修复异步传递问题：不再依赖子组件本地状态，直接通过父组件回调更新状态，避免异步导致的旧值传递错误。
4. 简化渲染逻辑：用三元表达式替代多层if/else判断，代码更简洁易读。

内容的提问来源于stack exchange，提问作者ANANTHU C