生命週期方法一旦呈現組件

我需要使用getBoundingClientRect()來獲取組件完全呈現後特定元素的確切位置。生命週期方法一旦呈現組件

我需要使用哪種生命週期方法？渲染完成後我不認爲componentDidMount()被調用。我的組件呈現DIV元素的列表。可能有多達30-40個。一旦它們被渲染，我想自動滾動到一個特定的元素。該元素可以位於渲染部分的底部，中間或任何位置。我爲每個DIV元素標識，因此很容易告訴getBoundingClientReact()給我它的位置。一旦我得到這些數據，我將滾動到該位置。

UPDATE：

這是我的代碼如下所示：

componentDidUpdate(prevProps, prevState) { 

    // Get the ID of the element I need to scroll to 
    const id = "divId-" + prevProps.myId; 

    // Find the rendered element 
    const element = document.getElementById(id); 

    // Get coordinates 
    const position = element.getBoundingClientRect(); 

    // Call scrollTo custom function to scroll to the element 
    scrollTo(position.top); 

    // Set the new location 
    this.props.actions.setLocation(position.top); 
}

來源

2017-10-11 Sam

是的，'setLocation'基本上在Redux存儲區中設置新的位置。一旦我明白了，設置新位置的最佳方式是什麼？基本上，我找出'componentDidUpdate（）'中的新位置作爲我的代碼的一部分。 – Sam

>請注意，您不能在這裏調用this.setState（）;你也不應該做其他任何事情（比如派遣一個redux動作），在componentWillUpdate返回之前觸發一個React組件的更新。如果您需要更新狀態以響應道具更改，請使用componentWillReceiveProps（）。 – HyeonJunOh

我希望這可以幫助你。 – HyeonJunOh

componentWillUpdate(prevProps, prevState)

componentWillUpdate（）是正在接收新道具或狀態時，呈現前調用。在更新發生之前使用此作爲執行準備的機會。對於初始渲染，此方法不稱爲。

或 componentDidUpdate(prevProps, prevState)

以此爲當組件已經更新了DOM操作的機會。如果您將當前道具與以前的道具進行比較（例如，如果道具尚未更改，則網絡請求可能不是必需的），這也是做網絡請求的好地方，作爲。

可能適合你。您可以查看here的詳細信息。

來源

2017-10-11 01:12:51 HyeonJunOh

我嘗試了兩種方法，並且出現'超出最大調用堆棧大小'錯誤。出於某種原因，它似乎進入循環。 – Sam

@Sam我認爲有一個無限的遞歸循環或類似的東西。你能否寫下導致錯誤的代碼？ – HyeonJunOh

'this.props.actions.setLocation'函數可能包含'setState（）'，這會造成無限循環。因爲'componentWillUpdate（）'和'componentDidUpdate（）'在每個組件的'setState（）'之前和之後執行。 – HyeonJunOh

生命週期方法一旦呈現組件

回答

相關問題