javascript - 如何防止 React Components 中的卸载？

Question

我正在尝试在我的应用程序中实现一项功能，当用户试图离开未提交的表单时，他们会收到确认信息，询问他们是否确定要在保存之前离开变化。

componentWillUnmount 方法似乎是完美的候选者，因为它会触发用户可能放弃表单的所有各种方式(更改导致它消失的父组件状态，导航到不同的路线等...)。但是...当确认返回 false 时，我无法阻止卸载。

关于我如何着手实现它有什么建议吗？

Answer 1

这最好通过 react-router 处理:setRouteLeaveHook。

componentWillMount() {
    this.unregisterLeaveHook = props.router.setRouteLeaveHook(props.route, this.routerWillLeave.bind(this));
}

routerWillLeave(nextLocation) {
  return false;        
}

当组件被卸载时，取消注册 leave 钩子(Hook):

componentWillUnmount() {
    this.unregisterLeaveHook();
}