react入坑 this.prop (二)

我今天刚看react,也不知道理解的对不对，然后画了一个图。。我觉得就是 ReactDOM.render先去在页面id为root的地方用.render方法渲染，那么渲染什么呢，就是这个Counter组件。这个组件里更新页面的方式就是组件里的reder()方法，在调用Cunter组件的时候 , 可以加上name = “xxx” 当然也可以 写上 aaa=111 bbb=222 然后在组件内部用this.props.name/aaa/bbb访问到你传的值 ，直接访问this.prop 因该是一个{name:1,aaa:111,bbb:222}这样的东西，就理解成vue的父传子吧。。

import React from 'react';
import ReactDOM from 'react-dom';



class Counter extends React.Component {
    state = {
        count: 0
    };
    // 加 1
    onAdd() {
        this.setState({
            count: this.state.count + 1
        });
    }
    // 减 1
    onSub() {
        this.setState(prevState => {
            return {
                count: prevState.count - 1
            };
        });
    }
    render() {
        return (
            <div>
                {/* 这里的 this.props 属性 */}
                <h1>{this.props.name}</h1>
                <button onClick={this.onSub.bind(this)}>-</button>
                <span>{this.state.count}</span>
                <button onClick={this.onAdd.bind(this)}>+</button>
            </div>
        );
    }
}

// Counter 组件传了一个 name 属性
ReactDOM.render(
    <Counter name="计数器" />,
    document.getElementById('root')
);