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

组件js 1import 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 2import React,{Component} from ‘react‘;import Text from "./dayTwo"//组件的导入class Num extends Component{ ???render(){ ???????return ( ???????????<div> ???????????????<Text/> ???????????????<Text/> ???????????????<Text/> ???????????</div> ???????) ???}}export default Num;

index.jsimport React from ‘react‘;import ReactDOM from ‘react-dom‘;import Num from "./two"ReactDOM.render(( ???<Num />), document.getElementById(‘root‘));