reactjs - Autosizer制作高度和宽度的div 0

我的配置如下：

// 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的用法，所以我将其设置为根据家长的宽度/高度进行调整。

我想念什么？

最佳答案

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

我建议您阅读"Using AutoSizer" docs page。我怀疑您的问题类似于此处提到的常见问题之一：


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