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>

日志给我：

width: 400 height: 200

如果我在浏览器中编辑 0px 框的 html 并滚动我的框，然后根据状态变化应该增加它的高度，没有任何反应。即使新的高度值被记录到控制台，它仍保持其手动修改的大小。

Answer 1

console.log 语句在您的子函数之外，所以我不确定它在记录什么（但它不是 AutoSizer 传入的值）。

还值得指出的是，您的内部 Grid 实际上是上述代码段中的正确尺寸：

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

您的网格周围的包装器 <div> 有意将 width 和 height 设置为 0 以使 AutoSizer 能够扩展以填充其父级 不拉伸。它的样式也设置为 overflow: visible 以说明这一点。

所以基本上 - 从您所展示的内容来看，一切都在按预期进行。要获得更多帮助，我可能需要你提供一个 Plunker。

AutoSizer 创建大小为 0 的框并且不显示内容

AutoSizer creates box of size 0 and does not display content

react-virtualized