react中的context的基础用法
context提供了一种数据共享的机制,里面有两个关键概念——provider,consumer,下面做一些key features描述。
参考网址:https://react.docschina.org/docs/context.html#reactcreatecontext
consumer:
数据消费者,消费来自己向上回溯过程中,离自己最近的provider提供的数据。
consumer接收一个函数作为子节点,函数返回一个react节点;函数可以消费来自context的值(即最近provider提供的数据)进行内部JSX语法渲染。
provider:
数据提供者,一个provider下的所有消费者都可以消费来自该provider的数据。
provider接收一个value属性,这个属性讲被provider提供给其consumer子节点。
一个provider可对应多个consumer。
生成一对{ provider, consumer}
基本上关于Context相关的主要特性都介绍完了,一个完整的demo如下:
theme-context.js
export const themes = {
light: {
foreground: '#ffffff',
background: '#222222',
},
dark: {
foreground: '#000000',
background: '#eeeeee',
},
};
export const ThemeContext = React.createContext(
themes.light //默认值
);
themed-button.js
import React from 'react';
import {themes,ThemeContext} from './theme-context';
class ThemeCircle extends React.Component{
render(){
return (<ThemeContext.Consumer>
{ theme => (<div
style={{
width:"60px",
height:"60px",
borderRadius:"30px",
backgroundColor: theme.background}}>
{/* Circle */}
</div>) }
</ThemeContext.Consumer>
);
}
}
class ThemedButton extends React.Component{
constructor( props ){
super(props);
}
render(){
return (<ThemeContext.Consumer>
{ theme => (<button
onClick = {this.props.changeTheme}
{...this.props}
style={{
backgroundColor:theme.background,
color:theme.foreground,
width:"100px",
height:"45px",
fontSize:"14px",
borderRadius:"5px",
border:"none"}}
/>) }
</ThemeContext.Consumer>);
}
}
// class ToolBar extends React.Component{//一个用到ThemedButton的中间件
// constructor( props ){
// super(props);
// }
// render(){//以此种方式直接触发父级事件?
// return (<ThemedButton onClick={this.props.changeTheme}>
// Change Theme
// </ThemedButton>);
// }
// }
class CustomizedApp extends React.Component{
constructor( props ){
super(props);
this.state = {
theme: themes.light
};
this.handleChangeTheme = this.handleChangeTheme.bind( this );
}
handleChangeTheme(){
//必须有一个机制可以修改provider的value,以引起订阅者consumer的变更
this.setState( state => ({
theme: state.theme === themes.light?themes.dark:themes.light
}) );
}
render(){
return (<div>
<ThemeContext.Provider value={this.state.theme}>
{/* <ToolBar changeTheme={this.handleChangeTheme} /> */}
<ThemedButton changeTheme={this.handleChangeTheme}>
Toggle
</ThemedButton>
<ThemeCircle />
</ThemeContext.Provider>
</div>);
}
}
export default CustomizedApp;
然后在Router里配置调用“CustomizedApp”组件就可以了。
路漫漫其修远其,吾将上下而求索——May stars guide your way.
react中的context的基础用法的更多相关文章
- React中的Context——从父组件传递数据
简介:在React中,数据可以以流的形式自上而下的传递,每当你使用一个组件的时候,你可以看到组件的props属性会自上而下的传递.但是,在某些情况下,我们不想通过父组件的props属性一级一级的往下传 ...
- React中使用styled-components的基础使用
今天准备来给大家分享分享React中styled-components的基础使用,仅仅是我个人的一些理解,不一定全对,有错误还请大佬们指出,496838236这是我qq,有想指点我的大佬随时加我qq好 ...
- react中对于context的理解
一.context旧版的基本使用 1.context的理解 当不想在组件树中通过逐层传递props或state的方式来传递数据时,可使用context来实现跨层级的组件数据传递. 2.context的 ...
- React中ref的三种用法 可以用来获取表单中的值 这一种类似document.getXXId的方式
import React, { Component } from "react" export default class MyInput extends Component { ...
- python中在计算机视觉中的库及基础用法
基于python脚本语开发的数字图像处理包有很多,常见的比如PIL.Pillow.opencv.scikit-image等.PIL和pillow只提供了基础的数字图像处理,功能有限:OpenCV实际上 ...
- react基础用法一(在标签中渲染元素)
react基础用法一(渲染元素) 如图所示最简单的变量使用方法 格式 let 变量名称 = 赋值: 渲染格式直接用 {变量名称} 就可以直接渲染到页面 如图所示第二种渲染方法 格式 const 变量名 ...
- Spring中JdbcTemplate的基础用法
Spring中JdbcTemplate的基础用法 1.在DAO中使用JdbcTemplate 一般都是在DAO类中使用JdbcTimplate,在XML配置文件中配置好后,可以在DAO中注入即可. 在 ...
- Vue基础01vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令
自学vue框架,每天记录重要的知识点,与大家分享!有不足之处,希望大家指正. 本篇将讲述:vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令 前期学习基础,使用vue. ...
- React中Props 和 State用法
React中Props 和 State用法 1.本质 一句话概括,props 是组件对外的接口,state 是组件对内的接口.组件内可以引用其他组件,组件之间的引用形成了一个树状结构(组件树),如果下 ...
随机推荐
- 小程序rpx
rpx是微信小程序解决自适应屏幕尺寸的尺寸单位.微信小程序规定屏幕的宽度是750rpx, 微信小程序也支持rem尺寸单位,rem规定屏幕的宽度是20rem vw vh适配 vw和vh是css3中的新单 ...
- saltstack api安装使用
Salt自然也是提供api的,使用api对自动化有极大的帮助,我们使用rest风格的api,当然大家都知道salt是python写的,那么自然也就提供了对应的api,但是并不建议使用,因为调用pyth ...
- ++i和i++的效率孰优孰劣
在内建数据类型的情况下,效率没有区别: 在自定义数据类型的情况下,++i效率更高! 分析: (自定义数据类型的情况下) ++i返回对象的引用: i++总是要创建一个临时对象,在退出函数时还要销毁它,而 ...
- Java: JavaMail 初试(一)
前言:以前的我,很喜欢写东西,写一写所想所见所闻所感,但是工作之后,总不能写出让自己满意的文章,突发奇想,能否利用写博客的时机,将其写成类似散文似的博文呢?哈哈... 邮件功能尝试:作为一个小菜鸟,对 ...
- linux命令:rsync
Rsync的命令格式可以为以下六种: rsync [OPTION]... SRC DEST rsync [OPTION]... SRC [USER@]HOST:DEST rsync [OPTION]. ...
- 红帽系统制作yum本地源
1 首先得吐槽吐槽,机房冷就算了,不能用手机(哈哈你懂的),没有站的位置,显示屏看不清楚.就这样开始制作yum本地源. 2 记下注意得两点,以防以后会忘记 a:可能是因为红帽系统,加上是实用光盘挂载的 ...
- Laravel中的模型的创建
<?phpnamespace App; use Illuminate\Database\Eloquent\Model; class Admin extends Model{ //指定表名 pro ...
- input输入框修改后自动跳到最后一个字符
<input class="m-form-control" onpaste="return false" placeholder="直播间名称& ...
- Codeforces Round #375 (Div. 2)【A,B【模拟】,D【DFS】】
PS_B:阿洗吧!B题卧槽数组开了250... PS_D:D题主要挂在了50*50口算得了250,数组开小,然后一开始还错了.= =哎,以后对于数据范围还是注意一点: 卧槽,这场可真二百五了... A ...
- atcoder#073D(枚舉)
題目鏈接: http://arc073.contest.atcoder.jp/tasks/arc073_b 題意: 給出n, m兩個數, n是物品數目, m是背包容量, 接下來n行輸入, wi, vi ...