问题标签 [react-window]

我有一张带有 react-table v7 的表。已使用 react-window 进行虚拟化。现在表格的最后一列已修复，但我无法修复表格的最后一列。React-window 的内部元素overflow: auto最终不会让列变得粘稠。

这是重现问题的链接。

我正在尝试围绕这些方面取得一些成就。

如果您看到问题链接，我希望将最后一行固定在某个位置，并使其余行保持水平滚动。

这是我的代码沙箱示例： https ://codesandbox.io/s/react-hooks-counter-demo-kevxp?file=/src/index.js

我的问题是：列表将始终在页面内的每个状态更改时重新呈现，因此滚动将始终回到顶部。我想知道为什么会发生这种情况，以及如何防止这种行为，即使列表的状态发生了变化，然后保持列表的最后滚动位置

在可搜索的反应选择下拉列表中呈现大量数据的最佳方法是什么？我查看了窗口化，其中 DOM 节点仅为在视口中可见的项目创建。这可以通过在 react-select 旁边使用 react-window 包来完成。但是，我想知道是否有比这更好的方法。

这是使用 react-window 和 react-select 的窗口实现

如何在滚动事件中检测列表元素的结尾？假设我有数组[1,2,3,4,5,6,7,8,9,10]，我需要检测滚动是否到达列表末尾并返回值（在这种情况下值为 10）？这是我的代码段：https ://codesandbox.io/s/react-window-detect-last-element-on-scrolling-down-oo99p

我最近开始学习 React 并且可以使用任何帮助。

我遇到了 Material-ui 自动完成组件的问题。需要一些真正的 React 大师来解决这个问题。我遇到的问题是，当我从自动完成下拉菜单中选择一个选项时，它会重置到列表的顶部。我正在使用 react-window，因为列表中有 300 多个元素。成分过滤器是我正在尝试修复的过滤器，其他过滤器工作正常。我创建了代码沙箱来演示应该发生什么以及当前正在发生什么。我已经搞砸了 React.memo 但这对它没有任何影响。如果您有任何想法，请告诉我。正确的沙箱来自 material-ui 站点：autcomplete 组件

正确：正确的沙箱

正确的gif

问题：问题沙箱

问题 gif

如果您需要任何澄清，请告诉我

antd在他们的文档中有一个示例，用于通过react-window集成虚拟滚动以提高大型表数据的性能

有人为antd中的嵌套表做过类似的事情吗？或者有任何指示/提示如何做？

当用组件（react-virtualized-auto-sizer ）包装我的虚拟列表<FixedSizeList>组件（react-beautiful-dnd + react-window ）时，我收到以下错误：<AutoSizer>

如果我不使用并提供硬编码值来包装<FixedSizeList>组件，则不会发生错误。<AutoResizer>

我的程序实现了 2 个独立的、不可拖动的列表，我可以从中拖放它们。因为列表不可拖动，所以它不是典型的“板”，但我使用React-Beautiful-DND 的 CodeSandBox for React-Window Basic Board作为指南，使其也能正常工作。

列表.js：

ListItem.js：

无论错误如何，一切似乎仍然正常运行，但我真的很想在继续之前了解问题。

I'm trying to add the windowing feature (from react-table virtualized-rows https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/virtualized-rows?file=/src/App.js:2175-2192)

to the Material-UI Enhanced Table (because I need the table of my application to be editable, with actions, filters, pagination..) from https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/material-UI-enhanced-table

both codes come from the official examples of react-table https://github.com/tannerlinsley/react-table/blob/5f67349a211c664dbc2eeaa9973c4d20f4e7e843/docs/examples/ui.md

Basically I started from the code of Material-UI Enhanced Table example and I added the FixedSizeList tag with its attributes and also the variable totalColumnsWidth taken from useTable()

From Chrome console I'm getting the error:

react.development.js:315 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: array. Check the render method of List. in List (at App.js:134) react-dom.development.js:23965 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of List.

What am I doing wrong?

The current code is: