好客租房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'))
运行结果
好客租房53-context的使用的更多相关文章
- JavaEE在职加薪课好客租房项目实战视频教程
JavaEE在职加薪课好客租房项目实战视频教程课程介绍: 本课程采用SOA架构思想进行设计,基于目前主流后端技术框架SpringBoot.SpringMVC.Mybaits.Dubbo等来 ...
- 好客租房46-react组件进阶目标
1能够使用props接收数据 2能够使用父子组件之间的通讯 3能够实现兄弟组件之间的通讯 4能够给组件添加props校验 5能够说出生命周期常用的钩子函数 6能够知道高阶组件的作用 组件通讯介绍 组件 ...
- 好客租房54-props深入(children属性)
children属性 表示组件标签的子节点 当组件标签有子节点是 props就会有该属性 props中的组件可以是任意属性 都是可以渲染的 //导入react import React fro ...
- 好客租房55-props深入(2props校验)
对于组件来说 props是外来的 无法保证使用者传入什么格式的数据 传入的数据格式不对 可能会导致组件内部报错 关键问题:不知道报错的具体原因 1安装包props-types 2导入props-typ ...
- 好客租房56-props深入(3props校验-约束规则)
1常见类型:Array,bool,func,number,object,string 2React:element 3必填项:isRequred 4特定结构的想:shape({}) //导入react ...
- 好客租房57-props深入(4props的默认值)
1给props设置默认值 //导入react import React from 'react' import ReactDOM from 'react-dom' import ...
- 好客租房48-组件的props(基本使用)
组件是封闭的 要接受外部数据应该通过props来实现 props的作用:接受传递给组件的数据 传递数据:给组件标签添加属性 接收数据:函数组件通过参数props接收数据 类组件通过this.props ...
- 好客租房49-组件的props(特点)
特点 1可以给组件传递任意类型的数据 2props是只读的对象 只能读取属性的值 无法修改对象 3注意:使用类组件时 如果写了构造函数 应该将props传递给super() 否则 无法在构造函数 中获 ...
- 好客租房43-react组件基础综合案例-4获取评论信息
获取评论信息 1使用受控组件方式创建表单 //导入react import React from 'react' import ReactDOM from 'react-dom' //导入组件 // ...
随机推荐
- C语言泛型编程——泛型冒泡排序
在实际编程中,常常会需要一些方法(函数),比如排序,它们具体实现基本一致,仅仅只有参数类型不同, 那么可不可以有一种通用的函数,不管是什么类型的参数都可以通用呢? 泛型编程:泛型即是指具有在多种数据类 ...
- 使用Web存储API存取本地数据
使用Web存储API TODO:本文由 赤石俊哉 翻译整理,您可以将本文自由地用于学习交流.如需用于其他用途请征得作者的同意. 原文链接:Using the Web Storage API - Moz ...
- 前端每日实战:134# 视频演示如何用 CSS 和 GSAP 创作一个树枝发芽的 loader
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/LJmpXZ 可交互视频 此视频是可 ...
- RStudio中文乱码
解决办法一: 1.设置RStudio文本显示的默认编码:RStudio菜单栏的Tools -> Global Options 2.code-->saving-->default te ...
- tomcat 安装配置及问题解决
最近没写程序 刚想运行一个jsp程序发现tomcat出现一些问题,然后就重新装了程序,重新配置 总结经验就是不要怕报错,把错误复制下来,百度里面都有解决办法 要安装与自己jdk版本相匹配的tomcat ...
- 截取url传值
// 页面传值 subStr(url) { var obj = {}; var str = url.split('?')[1]; var str2 = str.split('&'); cons ...
- 使用babel编译器将es6代码转为es5的方法
1.首先需要安装工具 babel-cli ========= npm i babel-cli -g install 可以使用i 代替 2.安装插件 npm i --save-dev babe ...
- Spring-Bean依赖注入(引用数据类型和集合数据类型)
为什么使用spring依赖注入详见–>依赖注入分析 1.创建实体类User类 package com.hao.domain; public class User { private String ...
- linux权限与系统信息
权限 1.权限分为3个部分 可读(r) 可写(w) 可执行(x) 没有对应权限(-) 2.权限位 权限位主要分为三个部分,分别是属主.属组以及其他人 rwx : 属主 r-x : 属组 r-x : 其 ...
- python的for循环基本用法
for循环 for循环能做到的事情 while循环都可以做到 但是for循环语法更加简洁 并且在循环取值问题上更加方便 name_list = ['jason', 'tony', 'kevin', ' ...