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>
    }
 }