If someone uses one of our compound components outside the React.createContext <ToggleContext.Provider />, they will experience a confusing error. We could provide a default value for our context, but in our situation that doesn't make sense. Instead let's build a simple function component which does validation of our contextValue that comes from the <ToggleContext.Consumer />. That way we can provide a more helpful error message.

import React from 'react'
import {Switch} from '../switch' const ToggleContext = React.createContext() function ToggleConsumer(props) {
return (
<ToggleContext.Consumer {...props}>
{context => {
if (!context) {
throw new Error(
`Toggle compound components cannot be rendered outside the Toggle component`,
)
}
return props.children(context)
}}
</ToggleContext.Consumer>
)
} class Toggle extends React.Component {
static On = ({children}) => (
<ToggleConsumer>
{({on}) => (on ? children : null)}
</ToggleConsumer>
)
static Off = ({children}) => (
<ToggleConsumer>
{({on}) => (on ? null : children)}
</ToggleConsumer>
)
static Button = props => (
<ToggleConsumer>
{({on, toggle}) => (
<Switch on={on} onClick={toggle} {...props} />
)}
</ToggleConsumer>
)
state = {on: false}
toggle = () =>
this.setState(
({on}) => ({on: !on}),
() => this.props.onToggle(this.state.on),
)
render() {
return (
<ToggleContext.Provider
value={{on: this.state.on, toggle: this.toggle}}
>
{this.props.children}
</ToggleContext.Provider>
)
}
} function Usage({
onToggle = (...args) => console.log('onToggle', ...args),
}) {
return (
<Toggle onToggle={onToggle}>
<Toggle.On>The button is on</Toggle.On>
<Toggle.Off>The button is off</Toggle.Off>
<div>
<Toggle.Button />
</div>
</Toggle>
)
}
Usage.title = 'Flexible Compound Components' export {Toggle, Usage as default}

[React] Validate Compound Component Context Consumers的更多相关文章

  1. [React] Make Compound React Components Flexible

    Our current compound component implementation is great, but it's limited in that users cannot render ...

  2. [React] Write Compound Components

    Compound component gives more rendering control to the user. The functionality of the component stay ...

  3. React.createClass 、React.createElement、Component

    react里面有几个需要区别开的函数 React.createClass .React.createElement.Component 首选看一下在浏览器的下面写法: <div id=" ...

  4. React 中的 Component、PureComponent、无状态组件 之间的比较

    React 中的 Component.PureComponent.无状态组件之间的比较 table th:first-of-type { width: 150px; } 组件类型 说明 React.c ...

  5. React Native 中 component 生命周期

    React Native 中 component 生命周期 转自 csdn 子墨博客  http://blog.csdn.net/ElinaVampire/article/details/518136 ...

  6. [React] Validate Custom React Component Props with PropTypes

    In this lesson we'll learn about how you can use the prop-types module to validate a custom React co ...

  7. [React] Compound Component (React.Children.map & React.cloneElement)

    Imaging you are building a Tabs component. If looks like: <Tabs> <TabList> <Tab> o ...

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

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

随机推荐

  1. Harris角点检测原理详解

    http://blog.csdn.net/lwzkiller/article/details/54633670 关于角点的应用在图像处理上比较广泛,如图像匹配(FPM特征点匹配).相机标定等.网上也有 ...

  2. 迅为4412嵌入式安卓开发板兼容3G网络|4G网络

    iTOP-Exynos4412开发板内置有无线 WIFI 模块.Bluetooth.GPS.Camera.3G等模组,陀螺仪等,支持 HDMI1.4(1080P/60Hz)显示,客户可以直接从开发平台 ...

  3. 迅为4412全新升级版|3G开发板|4G开发板

    iTOP-Exynos4412开发板采用 Exynos4412的主芯片,具有更高的主频和更丰富外设,配置 2GB 双通道 DDR3的内存及 16GB 存储,支持3G/G模块.GPS模块.陀螺仪.HDM ...

  4. NLog小记

    NLog安装: Install-Package NLog NLog配置: <?xml version="1.0" encoding="utf-8" ?&g ...

  5. react-native 框架升级 安卓第三方插件报错 Android resource linking failed

    亲自经历react-native从0.55升级到0.58的过程,有点坎坷,ios出现的问题还算不多,但是android这里,随着gradle和buildTool的使用升级,导致第三方插件出现各种问题, ...

  6. libuv httpparser写的简单http server

    libuv文档地址:http://docs.libuv.org/en/v1.x/代码地址:https://github.com/libuv/libuvhttp-parser https://githu ...

  7. 「 Luogu P1122 」 最大子树和

    # 题目大意 真讨厌题面写的老长老长的. 这个题的意思就是给定一棵无根树,每个节点都有一个美丽值(可能是负数),可以删掉一些边来删除某些点,现在要求你求出可以删掉任意条边的情况下,这个树上的剩余节点的 ...

  8. flask 开发配置

    flask 开发配置 一:在虚拟机里面安装ubuntu系统.略 二: apt install python3-pip #安装pip, pip3 install --upgrade pip 三: pip ...

  9. C++迭代器之'插入迭代器

    1. 定义 插入型迭代器(Insert Iterator),又叫插入器(Inserter). 2. 作用 插入迭代器的主要功能为把一个赋值操作转换为把相应的值插入容器的操作.算法库对所有在容器上的操作 ...

  10. Springboot 缓存使用

    . CachingProvider . CacheManager . Cache . Entry . Expiry 1. 开启基于注解的缓存 @EnableCaching 下面列出几个核心的注解 @C ...