Learn how to use the ‘branch’ and ‘renderNothing’ higher-order
components to render nothing when a certain prop condition is
met. Sometimes you only want to render a component when valid
props exist or are in a certain condition; ‘renderNothing’ is
an easy way to completely remove the component when you don’t
need to show it.

const userIsNotActive = ({ status }) => status !== 'active';
const hideIfNotActive = branch(userIsNotActive, renderNothing); const FeaturedUser = hideIfNotActive(({ name, status }) =>
<div>
<h3>Today's Featured User</h3>
<User name={ name } status={ status } />
<hr />
</div>
);

[Recompose] Render Nothing in Place of a Component using Recompose的更多相关文章

  1. [Recompose] Refactor React Render Props to Streaming Props with RxJS and Recompose

    This lesson takes the concept of render props and migrates it over to streaming props by keeping the ...

  2. [Recompose] Set the HTML Tag of a Component via a Prop using Recompose

    Learn how to user the ‘componentFromProp’ helper and ‘defaultProps’ higher order component to swap t ...

  3. [Recompose] Add Lifecycle Hooks to a Functional Stateless Component using Recompose

    Learn how to use the 'lifecycle' higher-order component to conveniently use hooks without using a cl ...

  4. [React Router v4] Conditionally Render a Route with the Switch Component

    We often want to render a Route conditionally within our application. In React Router v4, the Route ...

  5. [Recompose] Add Local State to a Functional Stateless Component using Recompose

    Learn how to use the 'withState' and 'withHandlers' higher order components to easily add local stat ...

  6. [React Router v4] Render Catch-All Routes with the Switch Component

    There are many cases where we will need a catch-all route in our web applications. This can include ...

  7. [Recompose] Handle React Events as Streams with RxJS and Recompose

    Events are the beginning of most every stream. Recompose provides a createEventHandler function to h ...

  8. [Recompose] Configure Recompose to Build React Components from RxJS Streams

    Recompose provides helper functions to stream props using an Observable library of your choice into ...

  9. React-代码复用(mixin.hoc.render props)

    前言 最近在学习React的封装,虽然日常的开发中也有用到HOC或者Render Props,但从继承到组合,静态构建到动态渲染,都是似懂非懂,索性花时间系统性的整理,如有错误,请轻喷~~ 例子 以下 ...

随机推荐

  1. asp.net Code学习二(使用vs 2015 update 3)

    1.在vs 2015上搭建asp.net core:  安装 .Net core sdk.vs2015 tool 即可使用vs 2015开发asp.net core. 2.Net core中国学习小组 ...

  2. Qt 图片浏览器 实现图片的放大缩小翻转等功能

    图片的功能 源码: wiget.h #ifndef WIDGET_H #define WIDGET_H #include <QPixmap> #include <QImage> ...

  3. hello word-python 入门

    今天正式开始学习python,先写一个最今经典的例子 helloword #!/usr/bin/python3.2 print("hello work!") 知识点: #!usr/ ...

  4. React评论展示案例(包含知识点:state、props、ref、React声明周期、localStorage本地存储等)

    本案例在上一篇的案例(React组件之间通过Props传值的技巧(小案例,帮助体会理解props.state.受控组件和非受控组件等))的基础上加强功能和用户体验,但是当然还有很多需要改进的地方,后期 ...

  5. ES6 数组、对象的扩展

    8. 数组的扩展 扩展运算符(...),将一个数组转为用逗号分隔的参数序列. 复制数组 const a2=[...a1] 合并数组 [...arr1, ...arr2, ...arr3]; arr1. ...

  6. Maven搭建Spring Security3.2项目详解

    本来是打算在上一篇SpringMVC+Hibernate上写的,结果发现上面那篇 一起整合的,结果发现上一篇内容实在是太长了,就另起一篇,这篇主要是采用 Maven搭建Spring+SpringMVC ...

  7. JS学习笔记 - 运动 - 淘宝轮播图

    <script> window.onload=function () { var oDiv=document.getElementById('play'); var aBtn=oDiv.g ...

  8. 使用mingw制作dll文件

    使用mingw制作dll文件 安装mingw 准备math.c文件 //math.c #include<stdio.h> int add(int a,int b){ return a+b; ...

  9. jmeter--错误之Not able to find Java executable or version. Please check your Java installation. errorlevel=2

    学习jmeter中遇到的问题: 'findstr' 不是内部或外部命令,也不是可运行的程序或批处理文件. Not able to find Java executable or version. Pl ...

  10. iOS开发UI篇--一个侧滑菜单SlidingMenu

    一.简介 侧滑菜单已经成为app一个极常用的设计,不管是事务类,效率类还是生活类app.侧滑菜单因Path 2.0和Facebook为开发者熟知,国内目前也有很多流行app用到了侧滑菜单,比如QQ.网 ...