Reactjs 如何使用createPortal（）关闭React模式？_Reactjs_Modal Dialog

Reactjs 如何使用createPortal（）关闭React模式？

reactjs

Reactjs 如何使用createPortal（）关闭React模式？,reactjs,modal-dialog,Reactjs,Modal Dialog,试图从模式对话框中取消模式对话框。我正在使用ReactDOM.createPortal（） index.html <body> <noscript> You need to enable JavaScript to run this app. </noscript> <div id="root"></div> <div id="modal"></div> <

试图从模式对话框中取消模式对话框。我正在使用ReactDOM.createPortal（）

index.html

  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    <div id="modal"></div>
  </body>


您需要启用JavaScript才能运行此应用程序。

ResponseModal.js

import React from "react";
import ReactDOM from "react-dom";

// The gray background
const backdropStyle = {
...
};

// The modal "window"
const modalStyle = {
...
};

const MODAL_ROOT = document.querySelector("#modal");

const JSX_MODAL = ({ children, setShowResponses }) => (
  <div style={backdropStyle}>
    <div style={modalStyle}>
      Child: {children}
      <br />
      <input
        type="button"
        value="Dismiss"
        onClick={() => {
          setShowResponses(false);
        }}
      />
    </div>
  </div>
);

function Modal({ showResponses, ...props }) {
  console.log("floop", showResponses);
  if (showResponses) {
    return ReactDOM.createPortal(JSX_MODAL(props), MODAL_ROOT);
  }
  return null;
}

export default Modal;

从“React”导入React；
从“react dom”导入react dom；
//灰色背景
常量backdropStyle={
...
};
//模态“窗口”
常数modalStyle={
...
};
const MODAL_ROOT=document.querySelector（“MODAL”）；
const JSX_MODAL=（{children，setShowResponses}）=>(
子：{children}


{
设置显示响应（假）；
}}
/>
);
函数模态（{showResponses，…props}）{
console.log（“floop”，showResponses）；
如果（显示响应）{
返回ReactDOM.createPortal（JSX_MODAL（props），MODAL_ROOT）；
}
返回null；
}
导出默认模式；

最后，包含组件：

const LargeCell = ({ SCID, extra, fen, color }) => {
  const [showResponses, setShowResponses] = useState(false);

  return (
    <div
      style={{
         ...
      }}
      onClick={() => setShowResponses(true)}
    >
      <SmallCell {...{ SCID, color }} />
      <DiagramForCell {...{ fen }} padding="3em"></DiagramForCell>
      <span className="diff-text opening-text">{extra.opening.desc}</span>
      <ResponsesModal {...{ showResponses, setShowResponses }}>
        FLUM!
      </ResponsesModal>
    </div>
  );
};

constlargecell=（{SCID，extra，fen，color}）=>{
const[showResponses，setShowResponses]=useState（false）；
返回(
setShowResponses（真）}
>
{extra.opening.desc}
弗罗姆！
);
};

单击LargeCell div时，我看到：

但是，“取消”按钮不起作用。我确信调用了setShowResponses（false），但是没有对模态进行重新渲染，因此它不会被忽略。如果我查看Chrome开发工具中的模态组件，showResponses的状态仍然显示true

所以问题是：消除这种模式的正确方法是什么？

所以LargeCell是一个表单元格组件，其中有多个。我所做的是将模态推送到表级别，并在那里显示/隐藏它：

        {showResponses ? (
          <ResponsesModal {...{ setShowResponses }}>FLUM!</ResponsesModal>
        ) : null}

{showResponses(
弗罗姆！
)：null}

setShowResponses由模式中的Disclose按钮调用，如前所示

缺点是，为了建立模型，每个大单元也需要设置显示响应。那道具必须向下推几层。现在没关系，但我开始怀疑是否应该使用上下文