[React] Implement a React Context Provider
If you have state that needs to exist throughout your application, then you may find yourself passing props all over the application and even "drilling" the prop through components that don't really care about the prop at all. In this lesson, we'll see a sample of a small app that has the "prop drilling problem" and learn how to implement the "Provider pattern" to access context state anywhere in the component tree.
To implement a context provider for render props:
class ToggleProvider extends React.Component {
static contextName = '__toggle__'
static Renderer = class extends React.Component {
static childContextTypes = {
[ToggleProvider.contextName]:
PropTypes.object.isRequired,
}
getChildContext() {
return {
[ToggleProvider.contextName]: this.props
.toggle,
}
}
render() {
return this.props.children
}
}
render() {
const {
children,
...remainingProps
} = this.props
return (
<Toggle
{...remainingProps}
render={toggle => (
<ToggleProvider.Renderer
toggle={toggle}
children={children}
/>
)}
/>
)
}
} function ConnectedToggle(props, context) {
return props.render(
context[ToggleProvider.contextName],
)
}
ConnectedToggle.contextTypes = {
[ToggleProvider.contextName]:
PropTypes.object.isRequired,
}
Modify the code:
[React] Implement a React Context Provider的更多相关文章
- [React] Always useMemo your context value
Have a similar post about Reac.memo. This blog is the take away from this post. To understand why to ...
- [React] Recompose: Theme React Components Live with Context
SASS Bootstrap allows us to configure theme or branding variables that affect all components (e.g. P ...
- react新特性 react hooks
本文介绍的是react新特性react hooks,本文面向的是有一定react开发经验的小伙伴,如果你对react还不是很熟悉的话我建议你先学习react并多多联系. 首先我们都知道react有3种 ...
- 【React Native】React Native项目设计与知识点分享
闲暇之余,写了一个React Native的demo,可以作为大家的入门学习参考. GitHub:https://github.com/xujianfu/ElmApp.git GitHub:https ...
- 【React】377- 实现 React 中的状态自动保存
点击上方"前端自习课"关注,学习起来~ 作者:陈俊宇 https://github.com/CJY0208 什么是状态保存? 假设有下述场景: 移动端中,用户访问了一个列表页,上拉 ...
- react聊天室|react+redux仿微信聊天IM实例|react仿微信界面
一.项目概况 基于react+react-dom+react-router-dom+redux+react-redux+webpack2.0+react-photoswipe+swiper等技术混合开 ...
- React源码 React.Component
React中最重要的就是组件,写的更多的组件都是继承至 React.Component .大部分同学可能都会认为 Component 这个base class 给我们提供了各种各样的功能.他帮助我们去 ...
- react系列从零开始-react介绍
react算是目前最火的js MVC框架了,写一个react系列的博客,顺便回忆一下react的基础知识,新入门前端的小白,可以持续关注,我会从零开始教大家用react开发一个完整的项目,也会涉及到w ...
- [react] 细数 React 的原罪
Props & onChange 的原罪 .「props & onChange 接口规范」它不是一个典型的「程序接口规范」. 当你拿到一个可视组件的 ref,却没有类似 setProp ...
随机推荐
- php报错权限设置
<?php //禁用错误报告 error_reporting(0); //报告运行时错误 error_reporting(E_ERROR | E_WARNING | E_PARSE); //报告 ...
- [备忘]js-xlsx 操作 Excel 插件
github地址:https://github.com/SheetJS/js-xlsx oss地址:http://oss.sheetjs.com/js-xlsx/xlsx.full.min.js
- 获取mapper
static UpdateLogMapper updateLogMapper = (UpdateLogMapper)SpringContextUtil.getBean(UpdateLogMapper. ...
- 每个人都能实现的vue自定义指令
前文 先来bb一堆废话哈哈.. 用vue做项目也有一年多了.除了用别人的插件之外.自己也没尝试去封装指令插件之类的东西来用. 刚好最近在项目中遇到一个问题.(快速点击按钮多次触发多次绑定的方法),于是 ...
- exe文件作为服务启动
一. 准备软件 instsrv.exe srvany.exe 这两个都是 Microsoft Windows Resource Kits 里面的小工具 链接:http://pan.baidu.com/ ...
- dashboard安装
1,安装程序包 # yum install -y openstack-dashboard 2,修改配置文件 # vim /etc/openstack-dashboard/local_settings ...
- Qt资料大全
简述 发福利了.发福利了.发福利了,重要的事情说三遍... 为了方便更多Qter了解.学习Qt,现将相关资源进行整理,主要内容包括:Qt官网.编码风格.GitHub & Third-Party ...
- Pixhawk---烧写FMU/IO bootloader
Pixhawk-FMU/IO烧写Bootloader 1 说明 用J-link来烧写Bootloader,Pixhawk板FMU/IO接口说明: J-link接口说明: Pix ...
- CMD应用 qtp/winshell/cmd的交互
=================================================================== '採用windows.shell的 sendkeys 方式: s ...
- hpuoj--校赛--2015年的第一场雪(暴力)
问题 D: 感恩节KK专场--2015年的第一场雪 时间限制: 1 Sec 内存限制: 128 MB 提交: 865 解决: 76 [提交][状态][讨论版] 题目描述 下雪了,KK学长站在三教门 ...