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的更多相关文章

  1. [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 ...

  2. [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 ...

  3. react新特性 react hooks

    本文介绍的是react新特性react hooks,本文面向的是有一定react开发经验的小伙伴,如果你对react还不是很熟悉的话我建议你先学习react并多多联系. 首先我们都知道react有3种 ...

  4. 【React Native】React Native项目设计与知识点分享

    闲暇之余,写了一个React Native的demo,可以作为大家的入门学习参考. GitHub:https://github.com/xujianfu/ElmApp.git GitHub:https ...

  5. 【React】377- 实现 React 中的状态自动保存

    点击上方"前端自习课"关注,学习起来~ 作者:陈俊宇 https://github.com/CJY0208 什么是状态保存? 假设有下述场景: 移动端中,用户访问了一个列表页,上拉 ...

  6. react聊天室|react+redux仿微信聊天IM实例|react仿微信界面

    一.项目概况 基于react+react-dom+react-router-dom+redux+react-redux+webpack2.0+react-photoswipe+swiper等技术混合开 ...

  7. React源码 React.Component

    React中最重要的就是组件,写的更多的组件都是继承至 React.Component .大部分同学可能都会认为 Component 这个base class 给我们提供了各种各样的功能.他帮助我们去 ...

  8. react系列从零开始-react介绍

    react算是目前最火的js MVC框架了,写一个react系列的博客,顺便回忆一下react的基础知识,新入门前端的小白,可以持续关注,我会从零开始教大家用react开发一个完整的项目,也会涉及到w ...

  9. [react] 细数 React 的原罪

    Props & onChange 的原罪 .「props & onChange 接口规范」它不是一个典型的「程序接口规范」. 当你拿到一个可视组件的 ref,却没有类似 setProp ...

随机推荐

  1. iOS系统的特点-iOS为什么运行更流畅

    1.进程管理机制-不允许后台进程: 2.用户事件响应优先级: 3.GPU加速: 4.系统内存管理机制: 5.运行机制-机器码直接运行-非虚拟机.

  2. 路飞学城Python-Day14

    转载:python之路-路飞学城-python-book [25.常用模块-logging模块详解] [26.常用模块-logging模块详解2] [27.常用模块-logging模块日志过滤和日志文 ...

  3. 利用php的GD库生成验证码

    <?php ,); //创建一个100宽30高的底图,默认黑色 ,,); //修改颜色.数字对应 rgb 的三个数值.白色 imagefill(,,$bgcolor); //从左上角到右下角把颜 ...

  4. SpringBoot实战(三)代码热部署

    每次代码改动后都需要重新手动Run项目,心累,在网上找了下,发现SpringBoot提供了热部署的方案,改动代码后自动编译打包,现在将热部署的配置方法记下来: 第一步:在pom.xml中添加依赖,导入 ...

  5. POJ 2375 Cow Ski Area

    Cow Ski Area Time Limit: 1000ms Memory Limit: 65536KB This problem will be judged on PKU. Original I ...

  6. 完毕乔布斯的梦想:一个免费wifi共享的乌托邦

    早在2007年推出iPhone时,乔布斯就提出这种如果:商业区与居民区的wifi路由器全民开放,实现与路人共享网络之便.能够想象,那算是一个wifi共享的乌托邦. 数年过去了,乔布斯的梦想依然没能全然 ...

  7. 删除heroku上的数据库记录

    部署本地项目到heroku上.在线上插入数据到数据库,本地代码再次更新到heroku,线上的数据记录还存在单是图片丢失.问题还没有解决: 本地代码和heroku代码怎样同步? heroku使用的pg和 ...

  8. nj08---process、console

    概念:所有属性都可以在程序的任何地方访问,即全局变量.在JavaScript中,通常window是全局对象,而Node.js的全局对象是global,所有全局变量都是global对象的属性,如:con ...

  9. Java单例你所不知道的事,与Volatile关键字有染

    版权声明:本文为博主原创文章,未经博主允许不得转载. 如果问一个码农最先接触到的设计模式是什么,单例设计模式一定最差也是“之一”. 单例,Singleton,保证内存中只有一份实例对象存在. 问:为什 ...

  10. bzoj1934: [Shoi2007]Vote 善意的投票(显然最小割)

    1934: [Shoi2007]Vote 善意的投票 题目:传送门 题解: 明显的不能再明显的最小割... st连同意的,不同意的连ed 朋友之间两两连边(即双向边) 流量都为1... 为啥: 一个人 ...