如果当前组件发生变化，请停止加载新路由/组件

我有一个需求，在用户导航到下一个选项卡之前，我需要检查本地状态是否发生更改。有点像处理元件遗弃。我想出了2个选项如下，如果当前组件发生变化，请停止加载新路由/组件

通过componentWillUnmount实现这一目标。如果最好的做法是有条件地停止组件被卸载？
通过window。正如在下述溶液中指出：https://groups.google.com/forum/#!topic/reactjs/z63RGG1l_0U

对此事的任何想法是极大的赞赏:)

2016-07-06 Hasitha Shan

没有办法通过'componentWillUnmount'来停止组件的卸载 - 只有当组件**将**卸载时才会调用此生命周期函数:) –

在react-router-redux路由器是国家的一部分，这样你就可以在那实验。

要做到这一点，你应该看看RouterContext，它提供了setRouteLeaveHook函数。或据我所知，还有第二种选择。上下文路由器对象包含listenBeforeLeavingRoute

this.context.router.listenBeforeLeavingRoute

但它基本上是相同的事情，如果你看一下反应路由器的源代码。但它可以从不同的层次访问。

编辑：也Route有onLeave钩，可能会有用！

希望它以某种方式帮助。

问候，的Mariusz

来源

2016-07-06 10:05:18 MariuszJasinski

感谢您的答复，我将检查此问题并返回你:) –

用户如何浏览到下一个标签？当您使用<Link>时，您可以在您的状态中定义一个unsavedChanges标志。只要您认为用户不能离开当前选项卡，就将其设置为true（通过分派操作并让Reducer负责该操作）。

class Foo extends React.Component { 
    handleClick(e) { 
    const { unsavedChanges } = this.props 
    if(unsavedChanges) { 
     e.preventDefault() 
    } 
    } 
    render() { 
    return (
     <Link to='/nextTab' onClick={this.handleClick}>Bar</Link> 
    ) 
    } 
}

当然你需要通过unsavedChanges到你的组件道具。

来源

2016-07-13 16:44:49 Steve

如果当前组件发生变化，请停止加载新路由/组件

回答

相关问题