React-window: Autosizer不适用于react-window

自动大小调整器组件_definitely_与此库一起使用。 查看常见问题解答：
https://github.com/bvaughn/react-window#can -a-list-or-a-grid-fill-100-the-width-or-height-of-a-page

抱歉，Stack Overflow并没有得到太多答复，但是我认为这仍然是解决此类问题的正确位置（假设您首先阅读了FAQs：wink :）

正如您所说的那样，它肯定有效，您能否指导我为什么它不适合我？

我已经阅读过常见问题解答，但是问题是高度和宽度为零，因此除非使用window.innerHeigth / Width，否则页面上不会显示任何图像。 我将代码粘贴在SO上，但我不知道它有什么问题，因为文档并没有太大帮助。
我希望你能很好地理解我的问题。 请让我知道更多的澄清。

在这里运行相同的问题。 我绝对不会让它工作。 更改调试代码：

  <AutoSizer>
    {({ height, width }) => {
      console.log(height, width)
      return(<List
        className="List"
        height={height}
        itemCount={1000}
        itemSize={35}
        width={width}
      >
        {Row}
      </List>)
    }}
  </AutoSizer>

当我从专用软件包（ import AutoSizer from "react-virtualized-auto-sizer"; ）使用AutoSizer时，没有输出。

当我从react-virtualized （从'react-virtualized'导入{AutoSizer}）使用它时，得到以下输出： 0 0和0 1806

完全让我惊讶为什么它不起作用（

在这里运行相同的问题。 我绝对不会让它工作。 更改调试代码：

  <AutoSizer>
    {({ height, width }) => {
      console.log(height, width)
      return(<List
        className="List"
        height={height}
        itemCount={1000}
        itemSize={35}
        width={width}
      >
        {Row}
      </List>)
    }}
  </AutoSizer>

当我从专用软件包（ import AutoSizer from "react-virtualized-auto-sizer"; ）使用AutoSizer时，没有输出。

当我从react-virtualized （从'react-virtualized'导入{AutoSizer}）使用它时，得到以下输出： 0 0和0 1806

完全让我惊讶为什么它不起作用（

同样的问题！ 你找到解决办法了吗？

也得到完全相同的问题。 切换到react-virtualized中包含的版本可以解决此问题，但我也希望将其独立使用w / react-window。

我在这里遇到同样的问题。

我能得到<AutoSizer />从专用包工作react-window直到我试图用ref的<List /> 。 它不会正确设置ref，因此我不得不从react-virtualized切换回使用AutoSizer。

因此，在源代码中，如果元素上没有计算出的宽度，则只是不呈现子元素而已。 我仍然必须使用实际的实现，但是似乎只要我的容器有一个大小（无论是固定的还是使用flex或其他东西），它将呈现输出

希望对别人有帮助

我在使用TypeScript时遇到了同样的问题。

export 'AutoSizer' was not found in 'react-virtualized-auto-sizer'

编辑：找到了修复。

@types/react-virtualized-auto-sizer软件包未明确定义AutoSizer组件。

而是将以下内容导出为默认类：
export default class extends React.Component<AutoSizerProps> {}

您可以将其导入为AutoSizer如下所示：
import AutoSizer from 'react-virtualized-auto-sizer';

高度为0时，我遇到了同样的问题，事实证明，其父级必须具有固定的大小才能正常工作。
IMO的这个“功能”完全消除了对AutoSizer的需求，因为我可能不使用它，而是给孩子固定的大小，效果是一样的。

来自文档
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.)

如果我们可以传递一个道具来覆盖此行为，并让AutoSizer将父级拉伸到其大小，那将是很好的。

也有同样的问题。

我能得到<AutoSizer />从专用包工作react-window直到我试图用ref的<List /> 。 它不会正确设置ref，因此我不得不从react-virtualized切换回使用AutoSizer。

我遇到了同样的问题，您该如何解决？

我遇到了同样的问题，您该如何解决？

我再次使用标准的<AutoSizer />

import { AutoSizer } from 'react-virtualized'

对我来说也是一样。 与反应窗口一起使用时，AutoSizer会将高度设置为0。 我还使用从React窗口虚拟化的AutoSizer。

原始文件

我可以在flex容器中使用AutoSizer吗？

当将AutoSizer用作弹性盒的直接子代时，通常最好用div包裹起来，如下所示：

<div style={{ display: 'flex' }}>
  <!-- Other children... -->
  <div style={{ flex: '1 1 auto' }}>
    <AutoSizer>
      {({ height, width }) => (
        <Component
          width={width}
          height={height}
          {...props}
        />
      )}
    </AutoSizer>
  </div>
</div>

我遇到了与你们同样的错误，并且一段时间后，我设法使其正常工作。
碰巧您需要设置外部容器的高度和宽度。 否则，它将不会呈现子级。
检查此示例https://codesandbox.io/s/crazy-zhukovsky-kteok?file=/src/app.js：277-312