reactjs - 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

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

我建议你阅读 "Using AutoSizer" docs page .我怀疑您的问题与此处提到的常见问题之一相似:

AutoSizer expands to fill its parent but it will not stretch the parent. This is done to prevent problems with flexbox layouts. If AutoSizer is reporting a height (or width) of 0- then it's likely that the parent element (or one of its parents) has a height of 0. One easy way to test this is to add a style property (eg background-color: red;) to the parent to ensure that it is the correct size. (eg You may need to add height: 100% or flex: 1 to the parent.)