Autosizer制作高度和宽度为0的div

Question

我的配置如下：

// Calling it
<div style={{ width: 1000, height: 800 }}>
  <MyComponent />
</div>

// MyComponent.js
<InfiniteLoader { ...itsProps }>
  {({ onRowsRendered }) => (

    <AutoSizer>
      {({ width, height }) => (

      <Table
        width={ width }
        width={ height }
        ...

问题是这就是正在呈现的内容：

<div style="overflow: visible; height: 0px; width: 0px;">
  <div class="ReactVirtualized__Table" role="grid">
    ...

所以屏幕上什么也看不到。

也许我误解了Autosizer用法，所以我将它设置为根据父级的宽度/高度进行调整。

我错过了什么？

Answer 1

height: 0您共享的 HTML 片段中的样式实际上不是问题，因为overflow: visible样式。这就是工作的方式AutoSizer。

我建议您阅读“使用AutoSizer”文档页面。我怀疑您的问题类似于那里提到的常见问题之一：

AutoSizer扩展以填充其父级，但不会拉伸父级。这样做是为了防止 flexbox 布局出现问题。如果 AutoSizer 报告的高度（或宽度）为 0-，则父元素（或其父元素之一）的高度可能为 0。测试此问题的一种简单方法是将样式属性（例如background-color: red;）添加到以确保它是正确的大小。（例如，您可能需要将height: 100%或添加flex: 1到父项。）