AutoSizer создает коробку размером 0 и не отображает содержимое

Question

Я пытаюсь добавить AutoSizer, но продолжаю получать высоту и ширину 0px.

добавляю 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

Если я отредактирую html окна 0px в браузере и прокручу мое поле, которое, по условию изменения, предполагается, что оно увеличивает его высоту, ничего не происходит. Он остается на свой измененный вручную размер, даже если новое значение высоты записывается в консоль.

Answer 1

Оператор console.log находится вне вашей дочерней функции, поэтому я не уверен, что он регистрирует (но это не значение, принятое AutoSizer).

Стоит также отметить, что ваш внутренний Grid на самом деле правильный размер в вашем фрагменте кода выше:

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

Обертка <div> вокруг сетки преднамеренно размером с width и height от 0 до включения AutoSizer в expand, чтобы заполнить его родителя , не растягивая его. Его стиль также установлен на overflow: visible.

Так что, как правило, все работает так, как вы ожидали от того, что вы показали. Чтобы получить дополнительную помощь, мне, вероятно, понадобится, чтобы вы предоставили Plunker.