非常粗糙的react网页ppt

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;