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')
);