javascript - 如何在 React 中调用模态函数响应？

Question

我想在响应中调用类似函数调用的东西，这样我就可以打开一个模式。我正在为模态使用 Material ui。

Modal

流程是这样的

1. 点击一个按钮
2. 发送请求
3. 获取响应并在 Modal 中显示消息。

模态作为一个单独的组件存在，所以我不能这样做

.then( e => {
        <Modal />
       })

尝试在同一文件中包含模态 Hook ，但效果不佳。

axios
      .post(`${url}`, {
        email: email
      })
      .then(res => {
        if (res.data.type === "account not found") {
          <WarningModal />
        } else if (res.data.type === "email sent") {
          <SuccessModal />
        }
      });

只想在收到响应时调用模态组件。

Answer 1

您可能已经注意到，来自 material-ui 的 Modal 组件采用 open 属性来指示模态是否打开。

因此，您需要做的是将模式放在 JSX 中的某个位置，并将 open 属性设置为来自组件状态的 bool 值。当您收到来自 HTTP 调用的响应时，将此 bool 值切换为 true，模态就会出现。