如果當前組件發生變化，請停止加載新路由/組件

我有一個需求，在用戶導航到下一個選項卡之前，我需要檢查本地狀態是否發生更改。有點像處理元件遺棄。我想出了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

如果當前組件發生變化，請停止加載新路由/組件

回答

相關問題