非常粗糙的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 NextBtn extends Component {
  constructor(props) {
    super(props);
    this.next = this.next.bind(this);
  }
  next() {
    let cur = this.props.cur;
    cur++;
    this.props.handleGoTo(cur);
  }
  render() {
    return (
      <div id='next' onClick={this.next}>
        next
      </div>
    );
  }
}

class PrevBtn extends Component {
  constructor(props) {
    super(props);
    this.prev = this.prev.bind(this);
  }
  prev() {
    let cur = this.props.cur;
    cur--;
    this.props.handleGoTo(cur);
  }
  render() {
    return (
      <div id='prev' onClick={this.prev}>
        prev
      </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);
  }
  getContent() {
    return [
      'hello',
      'hi',
      'tom',
      'jan'
    ]
  }
  goToPage(cur) {
    // window.location.hash = '#' + this.state.cur;
    if (cur < 1 || cur > this.state.num) {
      return
    }
    this.setState({
      cur: cur
    });
    window.location.hash = '#' + cur;
  }
  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'>
        <NextBtn cur={this.state.cur} handleGoTo={this.goToPage}/>
        <PrevBtn cur={this.state.cur} handleGoTo={this.goToPage}/>
        {html}
      </div>
    );
  }
}

export default Slide;

转载于:https://www.cnblogs.com/dkplus/p/8985957.html