因为是固定高度所以容器总高度和每个元素的 size、offset 很容易得到，这种场景也适合我们常见的大部分场景，例如新闻列表左图右文、会话消息这种。但是也有一些场景是例如有图片，我们的高度是一种，没有是另一种，这种情况也适合一些常见场景即高度可控，本小节我们看下不同子项高度情况下容器的总高度和每个元素的 size 和 offset 如何计算得到。
使用AutoSizer可是列表宽高为当前父组件的100 在使用VariableSizeList 会遇到列表项样式缓存没有被清除导致行高一直和第一次可视区域里展示的一样。可使用组件的属性resetAfterIndex(index: number, shouldForceUpdate: boolean = true): void来清除样式。react-window的github源码： https://github.com/bva...
It works by using a similar approach used react-virtualized’s AutoSizer. By having a resize listener registered to the element that holds the FixedSizeList, we’re able to update the height and width props passed to it whenever the size of the container changes....
data] } return( <AutoSizer > {({ height, width }) => ( <InfiniteLoader isItemLoaded={isItemLoaded(leadCount)} itemCount={itemCount} loadMoreItems={loadMoreItems} > {({ onItemsRendered, ref }) => ( <List key={`${width}${height}${data.length}`} height={height} width={width} ...
infinite virtualized table grid spreadsheet brianvaughn •1.8.11•5 months ago•2,170dependents•MITpublished version1.8.11,5 months ago2170dependentslicensed under $MIT 12,390,857 react-virtualized-auto-sizer Standalone version of the AutoSizer component from react-virtualized ...
AutoSizer or VariableSizeList will work with this approach, as in this example https://codesandbox.io/s/react-window-custom-scrollbars-t4352 @ranihorevcan you also share Code Sandbox example? @piecykI create a simple (and broken) example: ...
结合react-virtualized-auto-sizer使列表自适应当前页面的宽高 使用AutoSizer可是列表宽高为当前父组件的100% import { FixedSizeList } from "react-window"; import AutoSizer from "react-virtualized-auto-sizer"; const Example = () => ( <AutoSizer> {({ height, width }) => ( <FixedSizeList clas...
var myFunc = function () {}; function test(f) { console.log(f.name); } test(myFunc)...