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

组件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‘));

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