AutoSizerはサイズ0のボックスを作成し、内容を表示しません

Question

AutoSizerを追加しようとしていますが、高さと幅が0pxになっています。

私はこのようなオートサイザーを追加します。

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を編集して、状態変更によって想定されているボックスをスクロールして高さを増やしても、何も起こりません。新しい高さの値がコンソールに記録されていても、手動で変更されたサイズのままです。

Answer 1

console.logステートメントは子関数の外にあるため、どのようなログが記録されているのかわかりません（しかし、それはAutoSizerによって渡された値ではありません）。

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

にAutoSizerを可能にするために意図的にwidthと0のheightでサイジングされたグリッドのラッパー<div>：

それはまた、あなたの内側のGridがあなたの上のコードでは、正しいサイズは実際にあることを指摘する価値があります親のを伸ばしずに伸ばしてにします。そのスタイルはoverflow: visibleに設定されています。

基本的には、あなたが示したものから、期待通りのものが動作しています。それよりも多くの助けを得るために、私はあなたにPlunkerを供給する必要があるでしょう。