问题标签 [react-window]

到目前为止，我已经遵循了几个使用 react-table 和 react-window 的示例，但是我需要该表具有选择框来选择单个或分组的行以及一个类似单选的按钮，以便能够切换信息一行，我设法实现了这一点，但是当我向上或向下滚动时，选定的单选按钮会失去其选定状态，如下所示

正如您所看到的，当我选择一行时，它的 ID 显示在表格下方，但是当我滚动并将该行移离视图时，单选按钮将失去其选中状态。

我有一个代码示例here

我想使用 react-window 的原因是为了避免过多的 DOM 问题。另外，因为我正在使用nextjs并且React.lazy()不在那里工作。我有一个动态生成子组件的组件，您可以在此处Layout看到正在解决的问题。但是，在我看来，不可能事先得到孩子们的身高。

除了LayoutWrapper如上一个问题所示，VariableSizeList正在为我设置如下：

有没有解决这个问题的方法？

我正在使用 React-virtualized 为我正在制作的社交媒体网络应用程序呈现大量无限的帖子列表。CellMeasurer 用于允许动态 rowHeights，如果窗口保持相同大小，它就可以工作。

我尝试按照文档进行操作，但如果调整了浏览器窗口的大小，我无法让它重新计算 rowHeights。这就是问题的样子，下面是代码： 重叠行图像

我正在尝试使用 react-window-infinite-loader 进行无限滚动，并且每次加载项目时，滚动都会回到顶部。因此，如果我在列表中的 100 项并且加载了更多数据，我会回到顶部并必须重新开始。这是我正在尝试的代码

我正在使用一个无限滚动列表react-window并得到一个打字稿构建错误。我搜索了堆栈溢出并修复了其他一些以前的错误，但我无法修复最后一个错误。

这是codesandbox中的代码： https ://codesandbox.io/s/pedantic-leakey-bw5fv?file=/src/App.tsx

与此处链接中的代码副本相同：

和错误：

我已经使用yarn和create-react-app使用 typescript 模板创建了一个反应项目，即使在安装和使用其他模块之后它也能正常工作。之后我使用yarn add react-window并yarn add @types/react-window --dev引发以下错误：

即使npm i --save-dev @types/react-window在我的开发环境中运行后，它仍然会导致相同的错误。

该应用程序在 docker 中运行并在RUN yarn build命令上失败。使用前没有任何问题react-window。

怎么了？有关此错误的堆栈溢出的其他帖子已通过安装类型模块（针对不同的库）或设置noImplicitAny为false 诸如此处解决。

我试图将具有自己状态的组件添加到行中，但是当我触发toggle()由resetAfterIndex(). 据我了解，这就是resetAfterIndex()react-window 的行为。

有没有办法在保持组件状态的同时更新行的高度？

源代码：CodeSandbox

PS：如果可能的话，我想防止父级持有组件的状态，因为我需要添加到一行中的组件数量未知

在官方文档示例中， itemSize 不支持内容：

我试图弄清楚如何使用下面的代码（它基于官方react-window-infinite-loader示例，尽管我已经将它重构为基于钩子）。

下面的代码有VariableSizeList,AutoSizer并InfiniteLoader显示来自 API 的数据。

这是工作代码框链接中的上述代码。

如何让行不重叠？

我发现了一个似乎导致重叠行的代码示例：https ://codesandbox.io/s/yw4ok6l69z

还有另一个看起来很复杂的例子，我不知道它是如何工作的，也不知道如何让它适应上面的例子：https ://codesandbox.io/s/bugreact-window-dynamic-size-list-djegq 。好像这个例子使用DynamicSizeList的是尚未正式发布的？

我希望从 api 调用中呈现一个长列表，从 api 获取整个列表很慢，大多数用户不会查看整个列表，因此在滚动到可见列表底部时进行额外的 api 调用是目标。列表中每个项目的高度将不同，并且取决于每个项目的 api 响应中的文本量。

似乎有三个不同的库：

• react-virtualized: 基于类，维护频率较低，我无法List使用Autosizer,CellMeasurer和InfiniteLoader.
• react-window：同一作者，react-virtualized只有更新和更简单，支持在滚动到底部时调用和 API（InfiniteLoader）或允许可变大小的列表（VariableSizeList）但看起来不是两者：如何在 react-window 中的 VariableSizeList 中获取内容感知非重叠行？
• react-virtual: 最近更新和维护，基于钩子接口。

我不确定我是在找错地方还是什么，但这项任务似乎很难实现？实现这样一个列表的最佳方法是什么？

我正在从 React-window 包中实现 VariableSizeList，它声称只渲染用户可见的内容。但是，根据我的实验，我发现它总是在滚动窗口之前为滚动条提供准确的大小，这对我来说没有意义，因为我认为滚动条的大小可能会随着我向下滚动窗口而改变（加载更多数据）。谁能解释一下？