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. python中lambda的另类使用

    带if/else: ( lambda x, y: x if x < y else y )( 1, 2 ) 科里化: ( lambda x: ( lambda y: ( lambda z: x + ...

  2. Chrome不能在网易网盘中上传文件的解决办法

    Chrome不能在网易网盘中上传文件的解决办法1. 安装 Adobe Flash Player PPAPI,设置flash插件 chrome://settings/content/flash,许可[* ...

  3. 自定义控件学习——下拉刷新ListView

    效果 开始用Android Studio写了,还有挺多不明白这IDE用法的地方....蛋疼 主要思路 1. 添加了自定义的头布局    2. 默认让头布局隐藏setPadding.设置 -自身的高度  ...

  4. 15.Node.js REPL(交互式解释器)

    转自:http://www.runoob.com/nodejs/nodejs-tutorial.html Node.js REPL(Read Eval Print Loop:交互式解释器) 表示一个电 ...

  5. Redux简易理解

    1. createStore(相当于vuex的$store) 这才是数据存储仓库,用来存储初和输出的数据,更vuex$store功能一样 作用:  创建一个 Redux store 来以存放应用中所有 ...

  6. eclipse创建maven

    第一步: 第二步 第三步: 第四步: 第五步: 第六步: <?xml version="1.0" encoding="UTF-8"?> <we ...

  7. Spring CORS

    转载:Spring MVC 4.2 增加 CORS 支持 http://spring.io/blog/2015/06/08/cors-support-in-spring-framework http: ...

  8. Oracle调用Java类开发的存储过程、函数的方法

    oracle调用java类的基本步骤 1. 编写java代码,后续可以直接使用java代码,class文件或者jar包 2. 将写好的java代码导入到oracle数据库中,有两种方法:一种是使用lo ...

  9. 8.Swift教程翻译系列——控制流之条件

    3.条件语句 常常会须要依据不同的情况来运行不同的代码. 你可能想要在错误发生的时候运行一段额外的代码,或者当某个值变得太高或者太低的时候给他输出出来.要实现这些需求,你能够使用条件分支. Swift ...

  10. amazeui学习笔记--css(常用组件2)--面包屑导航Breadcrumb

    amazeui学习笔记--css(常用组件2)--面包屑导航Breadcrumb 一.总结 1.am-breadcrumb:用am-breadcrumb来声明面包屑导航控件,.am-breadcrum ...