React组件状态数据驱动思想

import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.css';
import PropTypes from 'prop-types';
class Dialog extends React.Component {
    static defaultProps = {};
    static propTypes = {
        title: PropTypes.string.isRequired
    }

    constructor(props) {
        super(props);//=>ES6中的EXTENDS继承,一旦使用了constructor,第一行位置必须设置SUPER执行
        this.state = {
            n: 0,//支持人数
            m: 0//反对人数
        }
    }

    render() {
        let {n, m} = this.state,
            stae = (m + n) <= 0 ? 0 + "%" : (n / (n + m) * 100).toFixed(2) + '%'
        return <section className='panel panel-default' style={{width: "60%", margin: '0 auto'}}>
            <div className='panel panel-heading' style={{fontSize: "20px", fontColor: 'red'}}>
                <h3>{this.props.title}</h3>
            </div>
            <div className='panel panel-body'>
                支持人数:{n}
                <br/>
                反对人数:{m}
                <br/>
                支持率:{stae}
            </div>
            <div className='panel panel-footer'>
                <button className='btn btn-success' onClick={this.support}>同意</button>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <button className='btn btn-danger' onClick={this.against}>反对</button>
            </div>
        </section>
    }
    /*支持反对函数*/
    support = (ev) => {this.setState({n: this.state.n + 1});}
    against = (ev) => {this.setState({m: this.state.m + 1});}
}
let root = document.getElementById("root");
ReactDOM.render(<main>
    <Dialog title='士大夫受到收到'></Dialog>
    <Dialog title='士大夫受到收到'></Dialog>
    <Dialog title='士大夫受到收到'></Dialog>
</main>, root)