tofacebook.com -专业IT技术社区 【百家号】脸书百科,用react结合mvc模式写计时器 -0+ Web程序 - tofacebook.com-专业IT技术社区
73°

【百家号】脸书百科,用react结合mvc模式写计时器 -0+ Web程序

标签:UNC   dex   cli   count   label   ons   imp   return   str   

组件js 1
import React, { Component } from ‘react‘;
class Text extends Component {
    // model
    constructor(p) {
        super(p);
        this.state = {
            count: 0
        }
    }
    // view
    render() {
        return (
            <div>
                <button onClick={this.decFunc.bind(this)}>-</button>
                <label>{this.state.count}</label>
                <button onClick={this.addFunc.bind(this)}>+</button>
            </div>
        )
    }
    // controller
    decFunc() {
        if (this.state.count > 0) {
            this.setState({
                count: this.state.count - 1
            })
        }

    }
    addFunc() {
            this.setState({
                count: this.state.count + 1
            })
    }
}
export default Text;
组件js 2
import React,{Component} from ‘react‘;
import Text from "./dayTwo"//组件的导入

class Num extends Component{
    render(){
        return (
            <div>
                <Text/>
                <Text/>
                <Text/>
            </div>
        )
    }
}
export default Num;
index.js
import React from ‘react‘;
import ReactDOM from ‘react-dom‘;
import Num from "./two"

ReactDOM.render((
    <Num />
), document.getElementById(‘root‘));

 

用react结合mvc模式写计时器 -0+

标签:UNC   dex   cli   count   label   ons   imp   return   str   

原文地址:https://www.cnblogs.com/cj-18/p/9370848.html


本文由百家号/熊掌号作者上传并发布,百家号仅提供信息发布平台。文章仅代表作者个人观点,不代表百度立场。

已有 0 条评论

    我有话说: