react组件传参:父子,子父,爷孙,兄弟

父-子
父组件
   Class FartherC extends React.Component{
        constructor(){
            super();
            this.state={
            name:'我是父组件的值',
            age:'20'
            }
        };
        render(){
            return(
                <div>
                     //将父组件中的name通过childrenname传递给子组件
                    <ChildrenC name={this.state.name}/>
                    //将父组件中的this.state中的所有值通过name传递给子组件
                    //'...'为扩展运算符,意思是将this.state中的值当做参数传递等同于
                     //<ChildrenC name={this.state.name} age ={this.state.age}/>
                    <ChildrenC {...this.state}/>
                </div>
            )
        }
   }
子组件
 Class ChildrenC extends React.Component{
        constructor(props){
            super(props);
            this.state={
            name:'我是子组件的值'
            }
        };
        render(){
            return(
                <div>
                    //父组件中的两种写法都可以在子组件中以如下方式获取父组件中的值
                    <h1>{this.props.name}</h1>
                </div>
            )
        }
   }
子-父
父组件
   Class FartherC extends React.Component{
        constructor(){
            super();
            this.state={
            name:'我是父组件的值',
            age:'20'
            }
        };
        handelParent(obj){//此处的obj表示着我要从子组件给父组件传递的参数为对象,根据需要决定
            this.setState({//将传递来的name赋值给this.state中的name
                name:obj.name
            })
        }
        render(){
            return(
                <div>
                    <ChildrenC {...this.state} 
                                //不用bind(this)那么this.的这个this不是FartherC 则报错
                               handelParent={this.handelParent.bind(this)}/>
                </div>
            )
        }
   }
子组件
 Class ChildrenC extends React.Component{
        constructor(props){
            super(props);
            this.state={
            name:'我是子组件的值'
            }
        };
        handelChange(event){
            //{name:'我是子组件传过来的',age:'40'}就是传递给父组件的值
            this.props.handelParent({name:event.target.value});
        };
        render(){
            return(
                <div>
                    //父组件中state中name的值会随着下面输入框中的值变化而变化
                    <input type='text' value={this.props.name} onChange={(event)=>{
                           this.handelChange(event)
                            }}/>
                </div>
            )
        }
   }
爷-孙
爷组件
   Class FartherC extends React.Component{
        constructor(){
            super();
            this.state={
            fname:'我是爷爷',
            fage:'20'
            }
        };
        render(){
            return(
                <div>
                   <ChildrenC {...this.state}/>
                </div>
            )
        }
   }
父组件
 Class ChildrenC extends React.Component{
        constructor(props){
            super(props);
            this.state={
            cname:'我是爸爸'
            }
        };
        render(){
            return(
                <div>
                    <SunC sunname={this.props.fname}/>
                </div>
            )
        }
   }
孙组件
 Class SunC extends React.Component{
        constructor(props){
            super(props);
            this.state={
            sname:'我是孙子'
            }
        };
        render(){
            return(
                <div>
                    <h1>{this.props.sunname}</h1>
                </div>
            )
        }
   }
兄弟//A组件中input输入的值在B组件中显示
 Class FartherC extends React.Component{
        constructor(){
            super();
            this.state={
            fname:'我是爷爷',
            fage:'20'
            }
        };
        ChangeA(obj){//此处的obj表示着我要从子组件给父组件传递的参数为对象,根据需要决定
            this.setState({//将传递来的name赋值给this.state中的name
                name:obj.name
            })
        }
        render(){
            return(
                <div>
                   <ChildrenA  ChangeA={this.ChangeA.bind(this)}/>
                   <ChildrenB {...this.state}/>
                </div>
            )
        }
   }
A组件
Class ChildrenA extends React.Component{
        constructor(){
            super();
            this.state={
            name:'我是A',
            age:'21'
            }
        };
        handelChange(event){
            this.props.ChangeA({name:event.target.value});
        };
        render(){
            return(
                <div>
                     <input type='text' value={this.props.name} onChange={(event)=>{
                           this.handelChange(event)}}/>
                </div>
            )
        }
   }
B组件
Class ChildrenB extends React.Component{
        constructor(){
            super();
            this.state={
            name:'我是B',
            age:'20'
            }
        };
        render(){
            return(
                <div>
                   <h1>{this.props.fname}</h1>
                </div>
            )
        }
   }