首页 > 其他分享> 文章详细

好客租房53-context的使用

2022-05-20 19:34:02 阅读：205 来源： 互联网

标签：const render Provider 53 React context 好客组件 return

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

更好的姿势

跨组件传递数据

Provider 用来提供数据

Consumer用来消费数据

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

const {Provider,Consumer}=React.createContext()

2使用Provider

<div>

</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'))

运行结果

标签：const,render,Provider,53,React,context,好客,组件,return
来源： https://www.cnblogs.com/yao-655442/p/16293487.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

好客租房53-context的使用

运行结果