具有动态列表尺寸的React窗口

Question

我试图将react-window添加到堆栈中，但是所有示例都要求静态地定义列表的宽度和高度，如下所示：

import { FixedSizeList as List } from 'react-window';
 
const Column = ({ index, style }) => (
  <div style={style}>Column {index}</div>
);
 
const Example = () => (
  <List
    height={75}
    itemCount={1000}
    itemSize={100}
    layout="horizontal"
    width={300}
  >
    {Column}
  </List>
);

在我当前的代码中，宽度和高度的定义如下：

 <div
                style={{
                    overflowY: 'scroll',
                    height:
                        width >= 600 &&
                        (isFirefox() ? '100%' : '-webkit-fill-available'),
                    width: isFirefox()
                        ? '-moz-available'
                        : '-webkit-fill-available',
                }}
            >
                {items.map(item => <MyItem ... />}

           </div>

如您所见，我的宽度和高度被定义为100%或webkit-fill-available。

如何使它与react-window或react-virtualized一起工作？

Answer 1

我建议在react-window中使用与react-window相同的逻辑，因此我们将编写如下：

const Example = () => (
  <List
    height={75}
    itemCount={1000}
    itemSize={100}
    layout="horizontal"
    width={300}
    className={isFirefox() ? 'FirefoxClass' : 'anotherStyle'}
  >
    {Column}
  </List>
);