react組件傳值

• 父組件向子組件傳值

  • 父組件

    <Es6cComponent nameall="abc"/>
    

  • 子組件

    通過構造器進行接受props,然後使用super繼承
    constructor(props){
        super(props);
    }
    
    子組件如何使用
    this.props.nameall
    

• 子組件向父組件傳值

  • 子組件

    子組件的方法
    handerClick(){
        changeColor方法必須和父組件的方法同名
        this.props.changeColor('green')
    }
    子組件調用
    <button onClick={(e)=>{this.handerClick(e)}}>更改父組件的顏色</button>
    ```
    

  • 父組件

    父組件的方法
    bgChange(color){
        this.setState({
            bgColor:color
        })
    }
    父組件傳入方法
    <Children bgColor={this.state.bgColor} changeColor={(color)=>{this.bgChange(color)}}>更改父組件的顏色</Children>
    ```
    

• 兄弟組件傳值（子組件傳給父組件然後在傳給另外一個組價）