antd Modal选择Create Manual点击Next后无法打开第二个模态框

• 事件回调里的JSX不会自动触发渲染：你在modalclick方法的else分支里直接写了<Modal>标签，这个JSX表达式执行完就被丢弃了——既没有被放到组件的渲染返回值里，也没有被React主动挂载，React根本不知道有这个组件存在，自然弹不出来。
• 状态复用混乱：就算把这个Modal挪到正确的渲染位置，你给它绑定的visible值用的是控制第一个模态框的isModalVisible，没有给第二个弹窗单独做显隐控制，状态值不对也弹不出来。
• 交互逻辑缺失：你预期的「关第一个弹窗、开第二个弹窗」的流程根本没写对应的状态更新代码，点完Next只弹了alert，完全没触发界面重新渲染。

1. 新增独立状态控制第二个弹窗的显隐，和第一个弹窗的状态完全分开，避免互相影响
2. 把第二个Modal组件挪到App组件的return渲染范围内，和第一个Modal并列放置，让React能正常扫描渲染到这个节点
3. 修改Next按钮的点击逻辑：选中「Create Manual」时，先把第一个弹窗的状态设为关闭，再把第二个弹窗的状态设为打开
4. 给第二个Modal补上取消、关闭等基础交互配置，绑定自身的状态值

import React, { useState } from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Modal, Button, Radio } from "antd";

const App = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);
  // 新增第二个弹窗的独立显隐状态
  const [isSecondModalVisible, setIsSecondModalVisible] = useState(false);
  const [selectRadio, setselectRadio] = useState("preselect");

  const showModal = () => {
    setIsModalVisible(true);
  };

  const select = (e) => {
    setselectRadio(e.target.value);
  };

  function modalclick() {
    if (selectRadio === "preselect") {
      alert("pre-select");
    } else {
      // 先关闭第一个弹窗，再打开第二个
      setIsModalVisible(false);
      setIsSecondModalVisible(true);
    }
  }

  return (
    <>
      <Button type="primary" style={{ float: "right" }} onClick={showModal}>
        Create Test Suite
      </Button>
      {/* 第一个原有弹窗 */}
      <Modal
        title="Create Test Suite"
        visible={isModalVisible}
        footer={[
          <Button key="cancel" onClick={() => setIsModalVisible(false)}>
            Cancel
          </Button>,
          <Button type="primary" key="next" onClick={modalclick}>
            Next
          </Button>
        ]}
      >
        <Radio.Group
          defaultValue="preselect"
          buttonStyle="solid"
          onChange={(e) => select(e)}
        >
          <Radio value="preselect">Create from Preselect</Radio>
          <Radio value="manual">Create Manual</Radio>
        </Radio.Group>
      </Modal>
      {/* 第二个弹窗，放在渲染树内，绑定独立的visible状态 */}
      <Modal
        title="Create Test Suite"
        visible={isSecondModalVisible}
        onCancel={() => setIsSecondModalVisible(false)}
        footer={[
          <Button 
            key="close" 
            type="primary" 
            onClick={() => setIsSecondModalVisible(false)}
          >
            Close
          </Button>
        ]}
      >
        MODAL 2 COMES HERE
      </Modal>
    </>
  );
};

ReactDOM.render(<App />, document.getElementById("container"));

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