• 非常粗糙的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;
    
  • 相关阅读:
    精细化python 类的内置属性
    python操作excel
    ghost linux
    Linux dd 命令
    Ubantu 使用root登陆的方法
    NSIS Error: "Error writing temporary file. Make sure your temp folder is valid
    error writing temporary file。make sure your temp folder is valid 问题已解决
    安卓电池状态监听
    Android源码下载
    vim插件详细安装过程
  • 原文地址:https://www.cnblogs.com/dkplus/p/8985957.html
Copyright © 2020-2023  润新知