共1个回答
UJ
游客uJLTPs
可以通过内联样式实现:
import React, { forwardRef } from "react";
import ReactDOM from "react-dom";
import { FixedSizeList as List } from "react-window";
import "./styles.css";
const PADDING_SIZE = 10;
const ITEM_SIZE = 35;
const Row = ({ index, style }) => (
<div
className={index % 2 === 0 ? "RowEven" : "RowOdd"}
style={{
...style,
top: `${parseFloat(style.top) + PADDING_SIZE}px`
}}
>
item {index}
</div>
);
const Example = () => (
<List
className="List"
height={150}
innerElementType={innerElementType}
itemCount={51}
itemSize={ITEM_SIZE}
width={300}
>
{Row}
</List>
);
const innerElementType = forwardRef(({ style, ...rest }, ref) => (
<div
ref={ref}
style={{
...style,
height: `${parseFloat(style.height) + PADDING_SIZE * 2}px`
}}
{...rest}
/>
));
ReactDOM.render(<Example />, document.getElementById("root"));
demo:https://codesandbox.io/s/react-window-list-padding-dg0pq
回答问题