componentDidMount調用之前參考回調

我設置一個使用內聯函數定義反應ref

render =() => { 
    return (
     <div className="drawer" ref={drawer => this.drawerRef = drawer}>

然後在componentDidMount的DOM參考未設置

componentDidMount =() => { 
    // this.drawerRef is not defined

我的理解是ref回調應該在mount期間運行，不過addi ng console.log報表顯示componentDidMount被稱爲之前的ref回調函數。

我看過例如 this discussion在github

其他代碼樣本顯示相同的假設，componentDidMount後應在render定義的任何ref回調被稱爲，它甚至stated in the conversation

所以componentDidMount是在所有ref回調已經執行完之後開除了？

是的。

我使用的反應15.4.1

別的東西，我已經試過

要驗證ref函數被調用，我試着定義它的類本身

setDrawerRef = (drawer) => { this.drawerRef = drawer; }

然後在render

<div className="drawer" ref={this.setDrawerRef}>
在這種情況下
控制檯日誌揭示了回調的確是被稱爲componentDidMount

來源

2017-05-19 quickshiftin

我可能是錯的，但是當你使用render方法的箭頭函數時，它會從類的外部的詞法範圍中捕獲'this'的值。嘗試擺脫你的類方法的箭頭函數語法，看看它是否有幫助。 – Yoshi

這對我很好。您確定在DidMount之後引用回撥電話嗎？製作2個控制檯。登錄這兩個函數，看看哪一個是第一個 – GProst

我正在使用15.5.4 React – GProst

-2

後嘗試聲明類像...

class YourClass extends Component { 
    render() {...same stuff you had...} 
    componentDidMount() {...same stuff you had...} 
}

我覺得你的類定義是使用無狀態組件定義並導致生命週期不能像預期的那樣工作。我有點驚訝，componentDidMount（）被調用，所以我可能會誤解這種情況。

來源

2017-05-19 16:50:11

的任何未定義的值我應該提到，在問題中;該組件已被聲明爲'class Drawer extends Component { ' – quickshiftin

啊，我實際上誤讀你的render（）代碼作爲一個組件def。我的壞。 –

在componentDidMount中，你能在瀏覽器DOM中找到你的ref元素（div.drawer）嗎？如果沒有，你不能參考。由於在另一個更大的代碼中發現問題，原因可能是ref元素（div.drawer）未呈現。

來源

2017-05-28 06:49:27

我是運行到一個類似的問題，似乎沒有提及'componentDidMount'中的那個DOM（即使應該有） –

@Dave Lunny：也許你可以分享一個最簡單的例子與缺失的ref？ –

componentDidMount調用之前參考回調

回答

相關問題