共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

回答问题