好客租房53-context的使用运行结果

app组件要传递给child组件 该如何处理

更好的姿势

跨组件传递数据

Provider 用来提供数据

Consumer用来消费数据

1调用React.createContext() 创建provider和comsumer消费两个组件

const {Provider,Consumer}=React.createContext()
2使用Provider
<Provider>
<div>
<child1/>
</div>
</Provider>
    //导入react
     import React from 'react'
     import ReactDOM from 'react-dom'
      
     //导入组件
     // 约定1：类组件必须以大写字母开头
     // 约定2:类组件应该继承react.component父类 从中可以使用父类的方法和属性
     // 约定3:组件必须提供render方法
     // 约定4:render方法必须有返回值
     const {Provider,Consumer}=React.createContext()
     class App extends React.Component {
         state = {
             count: 0,
         }
      
         render() {
             return (
                 <Provider value="geyao">
                 <div>                
                     <Child1 count={this.state.count}/>            
                 </div>
                 </Provider>
             )
         }
     }
     const Child1=props=>{
         return <div className='app'>
             <Node/>
         </div>
     }
     const Node=props=>{
         return <div className='app'>
             <SubNode/>
         </div>
     }
     const SubNode=props=>{
         return <div className='app'>
             <Consumer>
                 {data=><span>{data}</span>}
             </Consumer>
         </div>
     }
      
      
      
     ReactDOM.render(<App />, document.getElementById('root'))

运行结果