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. Codeforces 129A-Cookies(暴力)

    A. Cookies time limit per test 2 seconds memory limit per test 256 megabytes input standard input ou ...

  2. 玩转Bash脚本:选择结构之case

    总第5篇 之前,我们谈到了if. 这次我们来谈还有一种选择结构--case. case与if if用于选择的条件,不是非常多的情况,假设选择的条件太多.一系列的if.elif,.也是醉了. 没错,ca ...

  3. LinearLayout -设置负值属性

    1.我们调整两个控件的位置的时候,数值不仅仅是正数,负的也行,这时候只不过是跑到相对位置的另一边去了,例如 <ImageView android:id="@+id/image" ...

  4. [NOI.AC#33]bst 线段树

    链接 区间修改,完全二叉树,这引导我们把这棵树看成一棵线段树 .线段树的每一个节点相当于这棵二叉树的节点, 对于区间交换操作,我们对二叉树的每一层从上到下分别考虑,找到L,R在第i层对应的节点修改 这 ...

  5. 在IE中opacity透明度

    body{ background: red; opacity: 0.5; filter:alpha(opacity=50); } jQuery: if($.support.opacity == tur ...

  6. 企业网管软件之SOLARWINDS实战-制作拓扑图

    企业网管软件之SOLARWINDS实战-制作拓扑图-开始 企业网管软件之SOLARWINDS实战-制作拓扑图 本文出自 "李晨光原创技术博客" 博客,谢绝转载!

  7. Monkey脚本编写

    脚本优势:简单.快捷.不需要借助任何工具,可以做简单的性能测试 脚本缺点:只能简单实现坐标.按键等基本操作,无逻辑性 脚本格式:

  8. HDU 4607 Park Visit HDU暑期多校1

    10W个点的一棵树,边权为1 求访问K个点要走过的最小路程 BFS求出一条最长路以后,我们可以YY出其他的边都要重复走两次 树上的最长路可以从任意一点开始BFS求出这点的最大距离,再把终点设置为起点再 ...

  9. 关于java中String的一点理解

      String类是java的最基本类之中的一个,非常好的掌握它的原理非常是必要的!   1.String的Final类型的.是不可继承 的.final类默认的方法都为final类型,保证了方法不能被 ...

  10. HTML的SEO(搜索引擎优化)标准

    HTML的SEO(搜索引擎优化)标准 一.总结 这个做seo的时候要多看,做网站优化的时候 1. SEO(搜索引擎优化):通过总结搜索引擎的排名规律,对网站进行合理优化,使你的网站在百度和Google ...