Prompt 组件的逻辑

• when 为 true，message 方法 return 的变量为 false 的时候就会提示。message 可以接受一个函数也可以接受一个字符串。
• 两个关键点，需要弹出提示的话属性即：
  • when={true}
  • message={() => { return false }}

至于具体的 message 什么时候 return true 什么时候 return false 是需要按照业务处理。

具体使用

• 在 JSX 中增加组件，当切换路由的时候，visible 的状态会导致要不要提示，在满足条件需要弹出的时候，visible 要是 true。

• 例如：获取完数据之后，页面有数据的时候，切换路由是需要给出提示信息。先将 visible 属性值设置为 true，这样在有数据的时候，切换路由就会提示，message 方法 return 的 boolean 值为判断是否弹窗的逻辑，这里的 boolean 为 false 就会提示。

• 伪代码：

import router from 'umi/router'

<Prompt
  when={visible} // 有数据的时候visible一定是true
  message={location => {
    Modal.confirm({
      title: '请注意！',
      icon: <ExclamationCircleOutlined />,
      content: '确定要离开当前页面吗？一旦确认离开，当前页面的数据将被作废！',
      okText: '确认',
      cancelText: '取消',
      onOk: () => {
        // 确定按钮的逻辑
      },
      onCancel: () => {}
    });
    // false弹窗拦截
    return taskList.length > 0 ? false : true
  }
}
/>

防止踩坑的点：message 里的 return 一定要写在 Modal 的外边，这样在判断有数据的时候如果是 return false 就会自动弹出 Modal 拦截，如果是 return true 则不会提示。