react 組件傳值

整理 react 組件傳值 三種方式

1. 父組件向子組件傳值（經過props傳值）

子組件：

class Children extends Component{
        constructor(props){
            super(props);
        }
        render(){
            return(
                <div>這是：{this.props.name}</div>  // 這是 父向子
            )
        }
    }

父組件:

class App extends React.Component{
        render(){
            return(
                <div>
                    <Children name="父向子"/>
                </div>
            )
        }
    }

2. 子組件向父組件傳值（回調函數）

子組件

class Children extends Component{
        constructor(props){
            super(props);
        }
        handerClick(){
            this.props.changeColor('skyblue')  // 執行父組件的changeColor 並傳參  必須和父組件中的函數如出一轍
        }
        render(){
            return(
                <div>
                    <div>父組件的背景色{this.props.bgcolor}</div>  // 子組件接收父組件傳過來的值 bgcolor
                    <button onClick={(e)=>{this.handerClick(e)}}>改變父組件背景</button>  // 子組件執行函數
                </div>
            )
        }
    }
    
父組件

    class Father extends Component{
        constructor(props){
            super(props)
            this.state = {
                bgcolor:'pink'
            }
        }
        bgChange(color){
            this.setState({
                bgcolor:color
            })
        }
        render(props){
            <div style={{background:this.state.bgcolor}}>
                            // 給子組件傳遞的值  color  
                <Children bgcolor={this.state.bgcolor} changeColor={(color)=>{this.bgChange(color)}} /> 
                                                    // changeColor 子組件的參數=color 當作形參
            </div>
        }
    }

3. 兄弟組件傳值（子傳給父，父再傳給另外一個子）

子組件1
    class Children1 extends Component{
        constructor(props){
            super(props);
        }
        handerClick(){
            this.props.changeChild2Color('skyblue')  
            // 改變兄弟組件的顏色  把changeChild2Color的參數傳給父
        }
        render(){
            return(
                <div>
                    <div>children1</div>
                    <button onClick={(e)=>{this.handerClick(e)}}>改變children2背景</button>
                </div>
            )
        }
    }

子組件2
    class Children2 extends Component{
        constructor(props){
            super(props);
        }
        render(){
            return(
                <div style={{background:this.props.bgcolor}}>
                // 從父元素獲取本身的背景色
                    <div>children2 背景色 {this.props.bgcolor}</div>
                    // children2 背景色 skyblue
                </div>
            )
        }
    }    
父組件
 class Father extends Component{
    constructor(props){
        super(props)
        this.state = {
            child2bgcolor:'pink'
        }
    }
    onchild2bgChange(color){
        this.setState({
            child2bgcolor:color
        })
    }
    render(props){
        <div>
            <Children1 changeChild2Color={(color)=>{this.onchild2bgChange(color)}} />
            <Children2 bgcolor={this.state.child2bgcolor} />
        </div>
    }
 }