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的工作方式。

我建议你阅读"Using AutoSizer" docs page。我怀疑你的问题类似于那里提到的一个常见问题：

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

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

1 个答案: