反应窗口给最内向的div上课

发布于 2025-02-03 14:56:49 字数 1080 浏览 2 评论 0原文

我找不到如何在 react-窗口。在我的情况下，A有一个flex包装器，其中包含数据div的列表。但是，由于React-Window的最内向div将我的包装器分开，并且列出了我无法正确对齐列表项目的项目。是否有解决方法可以访问最内向的DIV并更改其班级或直接操纵其样式。

这是窗外的反应使我成为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>

谢谢！

原文

I can't find how to give a class to innermost div in react-window. In my case a have a flex wrapper containing list of data divs. But because react-window's innermost div separates my wrapper and list items I cannot properly align my list items. Is there a workaround either to access to innermost div and change it's class or directly to manipulate it's style.

Here is what react-window produces me as 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>

Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

在你怀里撒娇 2025-02-10 14:56:49

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

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"
  />
));

是代码沙盒示例

You can customize inner element and rows of each element

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"
  />
));

here is Code sandbox example

回复收藏 0 原文

~没有更多了~