Sample code for react-infinite using ES6 syntax without React.createClass
3187 단어 ReactReactComponent
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-infinite
https://github.com/seatgeek/react-infinite sample code for
react-infinite
with a create-react-app environmentNOTE
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
Reference
이 문제에 관하여(Sample code for react-infinite using ES6 syntax without React.createClass), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/MasashiSalvador/items/8c96952bde4bb20776d8텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)