import React, {Component} from 'react';
import './slide.css';
class Page extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div className='page' id={this.props.page}>
{this.props.content}
</div>
);
}
}
class Slide extends Component {
constructor(props) {
super(props);
this.state = {
num: 4,
cur: 1
};
this.getContent = this.getContent.bind(this);
this.goToPage = this.goToPage.bind(this);
this.prev = this.prev.bind(this);
this.next = this.next.bind(this);
}
getContent() {
return [
'hello',
'hi',
'tom',
'jan'
]
}
goToPage() {
window.location.hash = '#' + this.state.cur;
}
prev() {
let cur = this.state.cur;
if (cur <= 1) {
return
}
cur--;
this.setState({
cur: cur
});
setTimeout(() => {
this.goToPage();
}, 0);
}
next() {
let cur = this.state.cur;
if (cur >= this.state.num) {
return
}
cur++;
this.setState({
cur: cur
});
setTimeout(() => {
this.goToPage();
}, 0);
}
render() {
let html = [];
for (let i = 0; i<4; i++) {
html.push(<Page key={i} page={i+1} content={this.getContent()[i]}/>);
}
return (
<div className='slide'>
<button id='next' onClick={this.next}>next</button>
<button id='prev' onClick={this.prev}>prev</button>
{html}
</div>
);
}
}
export default Slide;
Very rough react webpage ppt
Guess you like
Origin http://43.154.161.224:23101/article/api/json?id=325212763&siteId=291194637
Recommended
Ranking