react 父子数据共享（2）

Context

引用Context方法
const {Provider,Consumer}=React.createContext()   创建Provider,Consumer
const myContext=React.createContext() 此种使用时为<myContext.Provider>/<myContext.Consumer>

父组件

使用Provider包裹div  通过value传值   可不为对象

 return (
      <Provider value={{name:'zs',adress:'sd',count:this.state.count,}}> 
        <div>
          <Child1></Child1>
        </div>
      </Provider> 
    )

子/孙组件

Consumer  内创建一个回调函数  因为要用形参接收 Provider传来的值  然后return要渲染的数据         

return (
      <Consumer>
       {(value)=>{
          return (
            <div>
               {value.count}
            </div>
        )}}
      </Consumer>
    )

children（类似于vue中的插槽）

父组件

    <Child1>
         <h1>123</h1>
         <h1>321</h1>
    </Child1>

子组件

多个children会转为数组形式

<div>
     {this.props.children}   值为 123   321
     {this.props.children[1]}   值为 321
</div>