react-window 给最里面的 div 一个 class

Question

我找不到如何给 react-window 中最里面的 div 一个 class。在我的例子中，有一个包含数据列表 divs 的 flex 包装器。但是因为 react-window 最里面的 div 将我的包装器和列表项分开，所以我无法正确对齐我的列表项。有没有一种解决方法可以访问最里面的 div 并更改它的 class 或直接操纵它的样式。

这是 react-window 生成的 html。

<div style="position: relative; height: 600px; width: 100%; overflow: auto; will-change: transform; direction: ltr;">
<div style="height: 31900px; width: 100%;"> // ***here is where I want to style or give a class because there should be a flex wrapper here*** 
    <div id="0" class="card product-card"><a class="product-title" href="/">
    </div>
    <div id="1" class="card product-card"><a class="product-title" href="/">
    </div>
    <div id="2" class="card product-card"><a class="product-title" href="/">
    </div>
    <div id="3" class="card product-card"><a class="product-title" href="/">
    </div>
</div>

谢谢！

Answer 1

您可以自定义内部元素和每个元素的行数

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}
    className="innerClass"
  />
));

这里是Code sandbox example

react-window 给最里面的 div 一个 class

react-window giving a class to innermost div

html

reactjs

react-window