Functions created with mapPropsStream canned be composed together to build up powerful streams. Bring in the compose helper from Recompose then simply list your functions in the order you want the props to push through.

In the example, we compose three things together, in order to create a powerful component.

1. We map user's click event to on increate and on decrease event streams.

2. We foward those count props to next stream 'loading', it will call ajax api to get Star Wars heros.

3. Last we create a typewriter to get a typing effect,

const CounterWithPersonLoader = compose(
count,
load,
typewriter
)(Counter)

[Recompose] Compose Streams of React Props with Recompose’s compose and RxJS的更多相关文章

  1. [Recompose] Lock Props using Recompose -- withProps

    Learn how to use the ‘withProps’ higher order component to pre-fill a prop, unable to be overridden. ...

  2. [Recompose] Make Reusable React Props Streams with Lenses

    If you hard-code a stream of props to target a specific prop, it becomes impossible to reuse that st ...

  3. [Recompose] Stream a React Component from an Ajax Request with RxJS

    Loading data using RxJS is simple using Observable.ajax. This lesson shows you how to take the ajax ...

  4. [Recompose] Transform Props using Recompose --mapProps

    Learn how to use the 'mapProps' higher-order component to modify an existing component’s API (its pr ...

  5. react Props 验证 propTypes,

    <body><!-- React 真实 DOM 将会插入到这里 --><div id="example"></div> <!- ...

  6. React——props的使用以及propTypes

    组件的props是只读的,组件不能修改自己的props,在React中,组件可以接受任意的props,如函数,对象,基本类型以及react元素 一.props的使用 1.一些组件并不需要知道自己的ch ...

  7. react~props和state的介绍与使用

    props是参数的传递,从上层模块向下层模块进行拿传递:而state是提局域变量,一般在本模块内使用,props是不能改变的,而state可以通过setState去修改自身的值. props Reac ...

  8. react props与render成员函数

    props是组件固有的属性集合,其数据由外部传入,一般在整个组件的生命周期中都是只读的,React的API顶层设计也决定了这一点.属性初值通常由React.createElement函数或者JSX中标 ...

  9. React props

    class WebSite extends React.Component { constructor() { super(); this.state = { name: "菜鸟教程&quo ...

随机推荐

  1. select选中值,传this

    <select onChange = "a(this)"></select> function a(obj){ $(obj).find("opti ...

  2. python3 之 Ellipsis

    在翻django 代码的时候无意中看到的, 主要还是在注解时候使用 官方参考:https://docs.python.org/3/library/constants.html#Ellipsis 注意: ...

  3. jquery 取页面中ifram中得节点

    <iframe src="html/bai.jsp" frameBorder=0 id=middle name=middle scrolling="yes" ...

  4. shell 特殊字符

    shell 基础 # 当做注释的比较多 : 命令分隔符,在同一行上写两个或两个以上的命令 :: 是case 代码块的结束符 . 点作为文件名的一部分 隐藏文件 目录名 点是正则表达式中的匹配字符 '' ...

  5. [ZJOI2008]骑士(基环树,树形dp)

    [ZJOI2008]骑士 题目描述 Z国的骑士团是一个很有势力的组织,帮会中汇聚了来自各地的精英.他们劫富济贫,惩恶扬善,受到社会各界的赞扬. 最近发生了一件可怕的事情,邪恶的Y国发动了一场针对Z国的 ...

  6. React 使用link在url添加参数(url中不可见)

    1. 在要跳转页面添加<Link to={{ pathname: `/staffManagement/cardRecord`, state: {time: YYYY-MM-dd, name: s ...

  7. 集团公司(嵌入ETL工具)財务报表系统解决方式

    集团公司(嵌入ETL工具)財务报表系统解决方式 一.项目背景: 某集团公司是一家拥有100多家子公司的大型集团公司,旗下子公司涉及各行各业,包含:金矿.铜矿.房产.化纤等.因为子公司在业务上的差异.子 ...

  8. hadoop-17-hive数据库元数据查看

    hadoop-17-hive数据库元数据查看 存在本地的mysql中: user001用户中 : > mysql -uhive -phive mysql> use hive; mysql& ...

  9. HDOJ1084 What Is Your Grade?

    What Is Your Grade? Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Othe ...

  10. GridView中使用CheckBox

    asp.net中checkbox是向server提交时才干触发事件 把该控件的autopostback设置为true.才干响应事件  protected void Checkbox_CheckedCh ...