javascript - Dynamic height with infinite scroll (react-virtualized) - Stack Overflow

admin管理员组

文章数量:1401849

I'm using 'react-virtualized' to render an infinite scrolling list.

However, I am having trouble rendering the rowHeight dynamically. I made an attempt, but it only is relevent for desktop, and feels wrong.

I tried following the examples, but had no success.

What is the correct way to calculate the true row height?

It should be responsive to mobile.

Here is an example:

class App extends React.Component {

  render() {

    return (
      <div>

        <AutoSizer>
        {({ height, width }) => (
        <List
          height={600}
          width={width}
          rowCount={foo.length}
          rowHeight={({ index }) => {
            const x = foo[index];
            if (x.name.length < 10) { return 20; } 
            else if (x.name.length > 9) { return 40;}
          }}
          rowRenderer={({ index, style }) => {
            const x = foo[index];
            return (
              <div key={index} style={style}>
                {x.name}
              </div>
            );
          }}
        />
        )}
        </AutoSizer>
      </div>
    );
  }
}

I'm using 'react-virtualized' to render an infinite scrolling list.

However, I am having trouble rendering the rowHeight dynamically. I made an attempt, but it only is relevent for desktop, and feels wrong.

I tried following the examples, but had no success.

What is the correct way to calculate the true row height?

It should be responsive to mobile.

Here is an example:

https://codesandbox.io/s/ADARgvlxB

class App extends React.Component {

  render() {

    return (
      <div>

        <AutoSizer>
        {({ height, width }) => (
        <List
          height={600}
          width={width}
          rowCount={foo.length}
          rowHeight={({ index }) => {
            const x = foo[index];
            if (x.name.length < 10) { return 20; } 
            else if (x.name.length > 9) { return 40;}
          }}
          rowRenderer={({ index, style }) => {
            const x = foo[index];
            return (
              <div key={index} style={style}>
                {x.name}
              </div>
            );
          }}
        />
        )}
        </AutoSizer>
      </div>
    );
  }
}

• javascript
• reactjs
• react-virtualized

Share Improve this question Follow asked Jul 27, 2017 at 13:36 YconYcon 1,95066 gold badges3232 silver badges5656 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

What is the correct way to calculate the true row height?

This is what the react-virtualized CellMeasurer ponent is for. You can see a demo of it measuring dynamic heights here. The source code for the demo are the *.example.js files here.

本文标签： javascriptDynamic height with infinite scroll (reactvirtualized)Stack Overflow