反應：父組件引用不能被新安裝的子組件訪問？

Question

我在做什麼：

簡單 - 我需要的組件包含它（Messages）儘快滾動消息列表的底部安裝。

猴子扳手在我的計劃:)

後裝入都很正常，直到滾動至底部...

我只是通過採取滾動能夠子組件的header搬來搬去一些傢俱（Messages），並將其移至其父組件（MessageSection）中以便使header保持不變。

這裏是之前和一個AFTER：

之前（！耶它的工作） MessageSection.js

if(this.state.messages !== null) 
    return (
    <ScrollArea speed={0.8} className="area" contentClassName="content"> 
     <Messages messages={this.state.messages} /> 
    </ScrollArea> 
); 
}else{ 

    return (
    <ScrollArea speed={0.8} className="area" contentClassName="content"> 
     <EmptyMessages /> 
    </ScrollArea> 
); 
} 

的簡單變化：

（基本上只是移動Messages的標題轉化爲父母的MessageSection）

1. 將頁眉從滾動的子組件中取出（Messages）。

2. 將報頭中的ScrollArea

3. 上方。然後以呈現新JSX -I裹一個新的div頁眉和ScrollArea（ 「消息」）

AFTER：（什麼！YU NO工作？）

MessageSection.js

if(this.state.messages !== null) { 
    return (
    <div className="messages"> 
     <div className ="messages-section-header"> 
     <span className="header">{this.props.name}</span> 
     </div> 
     <ScrollArea speed={0.8} className="area scrollarea-flex" contentClassName="content"> 
     <Messages messages={this.state.messages} /> 
     </ScrollArea> 
    </div> 
); 
}else{ 
    return (
    <div className="messages"> 
     <ScrollArea speed={0.8} className="area scrollarea-flex" contentClassName="content"> 
     <EmptyMessages /> 
     </ScrollArea> 
    </div> 
); 
} 

的錯誤：

我從ScrollArea.jsx#L222

遺漏的類型錯誤得到這個錯誤改制後：無法讀取屬性 '的offsetHeight'

---

的原因錯誤：

當滾動能夠組成Messages坐騎在它的componentDidMount它會嘗試使用ScrollArea組件的暴露情況下滾動至底部，但refs的ScrollArea內不存在。這是奇怪的，因爲refs將存在，如果稍後調用componentDidUpdate

對於參考，這裏是發生故障的子組件。

MessageList.js（渦旋能夠試圖滾動到底部，因爲它安裝組件）

contextTypes: { 
    scrollArea: React.PropTypes.object //Used by the Library to Access the Scrolling Panel(The Parent Component) 
}, 

componentDidMount: function() { 
    this._scrollToBottom(); 
}, 

_scrollToBottom: function() { 
    var scrollHeight = this.refs.messages.scrollHeight; 
    this.context.scrollArea.scrollYTo(scrollHeight);//ERROR -the refs will not exist inside context as expected 
} 

---

爲什麼我感到莫名其妙：

它不有意義的如何安裝ScrollArea，並且它的小孩Messages也可以安裝並調用定義的環境ScrollArea暴露給它，但ScrollArea的裁判不存在？ 這是一個雙重混淆，因爲它在我做了小小的改變之前就已經工作了。

問：

在我的代碼結構的簡單變化怎麼會導致上下文不能訪問它的裁判

Answer 1

的父組件不是「裝」，直到畢竟其子被「安裝」。因此，當您的MessagecomponentDidMount執行時，您的ScrollArea仍處於「掛載」狀態。

您的問題是您爲交互建模的結果：您有一個「子」組件支配某些父組件的行爲。如果你把你的父組件負責這個滾動行爲，那麼一切都會起作用。

具體來說，加上一個componentDidMount方法您MessageSection組件並把邏輯有：

componentDidMount: function() { 
    // Assume you add `ref="messages"` to your render method so you can 
    // get a reference to the child component 
    this.refs.messages._scrollToBottom(); 
}