在呈現|之前從virtualDOM訪問父節點ReactJS

我需要根據父元素設置組件尺寸。是否可以通過virtualDOM中的ref來獲取父級的寬度和高度？在呈現|之前從virtualDOM訪問父節點ReactJS

家長

export default class App extends React.Component { 
 
    render() { 
 

 
    return (
 
     <div> 
 
     <div className={'avocado-container'} ref={(container) => { this.container = container; }}> 
 
      <Resizer parent={this} scrollAxis={'y'}> 
 
      </Resizer> 
 
     </div> 
 
     </div> 
 
    ); 
 
    } 
 
}

我需要的尺寸在孩子的構造。

可能有類似this.refs.container.offsetWidth的東西嗎？

來源

2017-02-12 Honza Václavík

爲什麼不把它們作爲道具從父母組件中傳遞？ – havenchyk

編號佈局尺寸由瀏覽器計算，而不是虛擬DOM。可以手動設置尺寸，或者使用CSS來製作您的子組件填充寬度和高度。您也可以從componentDidMount中的渲染組件中讀取寬度和高度，並在那裏調用setState，這不是理想的，會導致第二次渲染，但有時需要完成。

來源

2017-02-12 17:03:40

這樣的組件是可測試的嗎？ – havenchyk

如果您需要測試didMount中元素維度流的讀數，則可以使用像jsdom這樣的工具來提供必要的環境。如果你不想測試它，你可以在didMount中做一個if語句來檢查某些對象的存在，比如'global.window' –

不要誤解我的意思，但jsdom不支持獲得html元素的真實寬度和高度，因此如果沒有真正的瀏覽器環境asaik，將很難測試 – havenchyk

在呈現|之前從virtualDOM訪問父節點ReactJS

回答

相關問題