具有动态列表维度的 React-Window

Question

I'm trying to add react-window to my stack, however all examples require the width and height of the list to be statically defined like this:

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

In my current code, the width and height are defined as follows:

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

           </div>

As you can see, my width and height are defined as 100% or webkit-fill-available .

How can I adapt this to make it work with react-window or react-virtualized ?

Answer 1

I would suggest using the same logic as className in react-window , so we are going to write it like:

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