如何使用 createPortal() 关闭 React 模式？答案

【问题标题】：How to dismiss a React Modal using createPortal()?如何使用 createPortal() 关闭 React 模式？
【发布时间】：2020-05-18 17:56:49
【问题描述】：

试图从 Modal 中关闭 Modal 对话框。我正在使用 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>

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;

最后，包含组件：

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>
  );
};

当我点击 LargeCell div 时，我看到：

但是，关闭按钮不起作用。我确定调用了 setShowResponses(false)，但是没有重新渲染 Modal，所以它不会被解雇。如果我查看 Chrome devtools 中的 Modal 组件，showResponses 的状态仍然显示 true。

所以问题是：关闭这个 Modal 的正确方法是什么？

【问题讨论】：

标签： reactjs modal-dialog

【解决方案1】：

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

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

setShowResponses 由 Modal 中的 Dismiss 按钮调用，如前所示。

缺点是要调出模态，每个 LargeCell 也需要 setShowResponses。该道具必须向下推几层。现在没关系，但我开始怀疑是否应该使用上下文。

【讨论】：