• 非常粗糙的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;
    
  • 相关阅读:
    查看表中bytea类型的字段内容
    Js中生成32位随机id
    VS Code操作指南
    记录一次非常简单的Win10安装
    Typora中下载并安装主题
    Win 10下隐藏任务栏图标B & O Play Audio Control
    IDEA基本使用
    Eclipse中安装反编译器(中文版)
    Eclipse设置控制台不自动弹出
    解决Eclipse控制台中文乱码的情况
  • 原文地址:https://www.cnblogs.com/dkplus/p/8985957.html
Copyright © 2020-2023  润新知