0

我正在尝试添加 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

如果我在浏览器中编辑 0px 框的 html 并滚动我的框，然后通过状态更改来增加它的高度，则不会发生任何事情。即使将新的高度值记录到控制台，它也会保持手动修改的大小。

4

1 回答 1

1

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

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

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

<div>围绕您的网格的包装器有意设置大小为 0width和height0，以便AutoSizer能够扩展以填充其父级而不拉伸它。它的风格也被设置为overflow: visible解释这一点。

所以基本上 - 事情按照你所展示的那样工作。要获得更多帮助，我可能需要你提供一个 Plunker。

于 2016-08-17T23:47:19.393 回答