react的组件传值

组件之间的嵌套关系分为以下4种通信方式：

1.父子通信

   在react中，数据是自顶而下单向数据流，父子之间的传值通常都是通过props来实现的，但是存在一个位于很深节点的子组件传值，嵌套层级很深的组件传值，这个时候props不太实用，要用Context来传值

• 用Props来实现

   父组件传值子组件（props）：

class Parent extends React.Component{
  
  render() {
        return (
           <Child getname="35464"></Child>
        );
    }
}


class Child extends React.Component{
  
  render() {
        return (
           <div>{this.props.getname}</div>
        );
    }
}

子组件传值父组件：

class Child extends React.Component{
    var a=0


   onclick=()=>{
      a++
     this.props.getnum(a)
   }
  render() {
        return (
           <div>
              <p>{a}</p>
               <button onclick={this.onclick}>点击</button>
          </div>
        );
    }
}


class Parent extends React.Component{
  
getnum=(value)=>{
console.log(value)

}
  render() {
        return (
           <Child getnum={this.getnum}></Child>
        );
    }
}

关于父子组件传值异步的问题，可以参考：componentWillReceiveProps

• 通过Context

<div id="root"></div>    
<script type="text/babel">
    const { Provider, Consumer } = React.createContext()           //调用React.createContext返回一个Provider和Consumer组件
    class Parent extends React.Component{
        state = {height:180}
        render(){                        
            return (
                <div>
                    <button  onClick={e=>this.setState({height:this.state.height+1})}>测试</button>
                    <Provider value={{height:this.state.height}}>         //Provider组件内通过value设置contexxt
                        <Child></Child>
                    </Provider>
                    
                </div>
            )
        }
    }

    class Child extends React.Component{
        render(){
            return     <p>
                                <Consumer>{val=>val.height}</Consumer>          /子组件内通过Consumer来直接获取值，子节点是一个函数，参数是传递过来的值
                            </p>
        }
    }

    ReactDOM.render(<Parent></Parent>,root)
</script>

2.兄弟通信

3.跨级通信

4.无级通信