Sample code for react-infinite using ES6 syntax without React.createClass

3187 단어 ReactReactComponent
I want to implement infinite scroll in my app.
I found https://github.com/bvaughn/react-virtualized , but it's a bit heavy. I want to use a simple and thin one, and then I found react-infinite react-infinitehttps://github.com/seatgeek/react-infinite
sample code for react-infinite with a create-react-app environment
  • using create-react-app
  • using ES6 syntax
  • without React.createClass
  • NOTE

  • this sample code has elements in React Component's state
    It's a bit weird.
  • code

    import React, { Component } from 'react';
    import Infinite from 'react-infinite';
    import logo from './logo.svg';
    import './App.css';
    
    class App extends Component {
      render() {
        return (
          <div className="App">
            <div className="App-header">
              <img src={logo} className="App-logo" alt="logo" />
              <h2>Welcome to React</h2>
            </div>
            <p className="App-intro">
              To get started, edit <code>src/App.js</code> and save to reload.
            </p>
            <InfiniteList />
          </div>
        );
      }
    }
    
    class ListItem extends React.Component {
    
      render () {
        return (
          <div className="infinite-list-item">
            List Item {this.props.num}
          </div>
        );
      };
    };
    
    
    class InfiniteList extends React.Component {
      constructor (props) {
        super(props);
        this.state = {
          elements: this.buildElements(0, 100),
          isInfiniteLoading: false
        };
      }
    
      buildElements (start, end) {
        let elements = [];
        for (let i = start; i < end; i++) {
          elements.push(<ListItem key={i}/>)
        }
        return elements;
      }
    
      handleInfiniteLoad () {
        let that = this;
        this.setState({
          isInfiniteLoading: true
        });
        setTimeout(function() {
          let elemLength = that.state.elements.length,
            newElements = that.buildElements(elemLength, elemLength + 1000);
          that.setState({
            isInfiniteLoading: false,
            elements: that.state.elements.concat(newElements)
          });
        }, 2500);
      }
    
      elementInfiniteLoad () {
        return <div className="infinite-list-item">
          Loading...
        </div>;    
      }
    
      render () {
        return <Infinite elementHeight={40}
          containerHeight={250}
          infiniteLoadingBeginBottomOffset={200}
          onInfiniteLoad={this.handleInfiniteLoad}
          loadingSpinnerDelegate={this.elementInfiniteLoad()}
          isInfiniteLoading={this.state.isInfiniteLoading}
        >
          {this.state.elements}
        </Infinite>;
      }
    };
    
    
    export default App;
    
    

    Gif


    좋은 웹페이지 즐겨찾기