AutoSizer創建大小爲0的框並且不顯示內容

我想添加AutoSizer，但不斷獲得0px的高度和寬度。AutoSizer創建大小爲0的框並且不顯示內容

我添加AUTOSIZER這樣的：

console.log("width: " + width, "height: " + height); 

    return (
     <div style={{height: '300px'}}> 
     <AutoSizer> 
      {({ width, height }) => (
       <VirtualScroll 
        ref="VirtualScroll" 
        width={width} 
        height={height} 
        rowCount={months.length} 
        rowHeight={this.getMonthHeight} 
        estimatedRowSize={rowHeight * 5} 
        rowRenderer={this.renderMonth} 
        onScroll={onScroll} 
        scrollTop={this._initScrollTop} 
        className={classNames(style.root, {[style.scrolling]: isScrolling})} 
        style={{lineHeight: `${rowHeight}px`}} 
        overscanRowCount={overscanMonthCount} 
       /> 
      )} 
     </AutoSizer> 
     </div> 
    );

生成的HTML：

<div class="Cal__Container__listWrapper"> 
    <div style="height: 300px; position: relative;"> 
    <div style="overflow: visible; height: 0px; width: 0px;"> 
     <div aria-label="grid" class="Grid VirtualScroll Cal__List__root" role="grid" tabindex="0" style="line-height: 40px; height: 300px; width: 400px; overflow-x: hidden; overflow-y: auto;"> 
     ... 
     </div> 
    </div> 
    </div>

日誌給我：

寬度：400高度：200

如果我在瀏覽器中編輯0px框的html並滾動我的框，那麼通過狀態改變然後應該增加它的高度，什麼都不會發生。即使將新的高度值記錄到控制檯，它仍保持其手動修改的大小。

來源

2016-08-17 jt123

console.log聲明不在您的子函數中，所以我不確定它在記錄什麼（但它不是AutoSizer傳入的值）。

這也是值得指出的是你的內在Grid實際上是在你上面的代碼片段的正確尺寸：

<div style="height: 300px; width: 400px;">

的包裝<div>網格各地有意與width和0 height大小形成爲使AutoSizer到展開以填充其父母而不伸展它。它的風格也設置爲overflow: visible來解釋這一點。

所以基本上，事情正如你所預料的那樣工作。爲了獲得更多的幫助，我可能需要你提供一個Plunker。

來源

2016-08-17 23:47:19 brianvaughn

AutoSizer創建大小爲0的框並且不顯示內容

回答

相關問題