[Recompose] Create Stream Behaviors to Push Props in React Components with mapPropsStream
Rather than using Components to push streams into other Components, mapPropsStream
allows you to create functions that can wrap components to create shareable behaviors across components.
Using componentFromStream:
import React from "react"
import { render } from "react-dom"
import { Observable } from "rxjs"
import config from "recompose/rxjsObservableConfig"
import {
setObservableConfig,
componentFromStream,
createEventHandler,
mapPropsStream
} from "recompose" setObservableConfig(config)
//#endregion const Counter = props => <h1>{props.count}</h1> const CounterWithInterval = componentFromStream(
props$ => props$.switchMap(
props => Observable.interval(1000),
(props, count) => ({count, ...props})
)
.map(Counter)
) const App = () => (
<div>
<CounterWithInterval />
</div>
) render(<App />, document.getElementById("root"))
MapPropsStream allows you to create functions that will decorate your component, rather than creating a component itself. I'm going to create an interval here using MapPropsStream.
A mapProposStream version can be like this:
import React from "react"
import { render } from "react-dom"
import { Observable } from "rxjs"
import config from "recompose/rxjsObservableConfig"
import {
setObservableConfig,
componentFromStream,
createEventHandler,
mapPropsStream
} from "recompose" setObservableConfig(config)
//#endregion const Counter = props => <h1>{props.count}</h1> const interval = mapPropsStream(props$ => props$.switchMap(
props => Observable.interval(1000),
(props, count) => ({ count, ...props })
)) const CounterWithInterval = interval(Counter) const App = () => (
<div>
<CounterWithInterval />
</div>
) render(<App />, document.getElementById("root"))
As you can see, we take the hightlighted part as own function, wrapped with 'mapPropsStream'.
[Recompose] Create Stream Behaviors to Push Props in React Components with mapPropsStream的更多相关文章
- [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 ...
- [React] Create and import React components with Markdown using MDXC
In this lesson I demonstrate how to use the library MDXC to create and import React components with ...
- [Recompose] Stream Props to React Children with RxJS
You can decouple the parent stream Component from the mapped React Component by using props.children ...
- [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 ...
- Akka(18): Stream:组合数据流,组件-Graph components
akka-stream的数据流可以由一些组件组合而成.这些组件统称数据流图Graph,它描述了数据流向和处理环节.Source,Flow,Sink是最基础的Graph.用基础Graph又可以组合更复杂 ...
- [React] Create a Query Parameter Modal Route with React Router
Routes are some times better served as a modal. If you have a modal (like a login modal) that needs ...
- [React] Make Controlled React Components with Control Props
Sometimes users of your component want to have more control over what the internal state is. In this ...
- [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 ...
- [React Native] Create a component using ScrollView
To show a list of unchanging data in React Native you can use the scroll view component. In this les ...
随机推荐
- NYOJ 16 矩形嵌套【DP】
解题思路:呃,是看的紫书上面的做法,一个矩形和另一个矩形之间的关系就只有两种,(因为它自己是不能嵌套自己的),可嵌套,不可嵌套,是一个二元关系,如果可嵌套的话,则记为1,如果不可嵌套的话则记为0,就可 ...
- 定时清理clientmqueue目录垃圾文件防止占满磁盘空间
RedHat/CentOS 5.8 默认就有sendmail,而6.4默认没有. 手动清理方法: find /var/spool/clientmqueue/ -type f|xargs rm -f ...
- 优动漫PAINT-百褶裙绘制教程
不论是萌系水手服还是洋气学院风,一定少不了百褶裙的绘制.不同的群褶,会呈现不同的视觉效果.裙褶的结构在舒展和重叠的时候也存在不一样的绘制技巧.让我们一起通过这篇教程,看看百褶裙是如何绘制的吧~ 作者: ...
- Oralce中的package和package body
1.Oracle Package的作用: 可以简化应用设计.提高应用性能.实现信息隐藏.子程序重载 2.ORACLE中的function .package.package bodies.pro ...
- Nginx 安装 自用
hostnamectl set-hostname nginx systemctl stop firewalld.service systemctl disable firewalld.service ...
- C语言中头文件尖括号和引号的区别
用include 引用头文件时,双引号和尖括号的区别: 1.双引号:引用非标准库的头文件,编译器首先在程序源文件所在目录查找,如果未找到,则去系统默认目录查找,通常用于引用用户自定义的头文件. 2.尖 ...
- NYIST 531 太空飞行计划
太空飞行计划 时间限制:1000 ms | 内存限制:65535 KB 难度:4 描述 W 教授正在为国家航天中心计划一系列的太空飞行.每次太空飞行可进行一系列商业性实验而获取利 ...
- js面向对象编程:怎样定义常量?
js中有一个keywordconst,但眼下的浏览器似乎还不支持,假设一定要定义一些常量,事实上能够使用闭包,匿名函数实现常量的定义. 比如: var Class = (function() { va ...
- hibernate动态表名映射--仅仅有想不到,没有做不到
近期的一个项目有一个需求,有N个考核单位,要对每一个考核单位生成一张考核情况表.这样做的目的是横切数据库,这这个需求的实现中,我的组员遇到了一个技术问题,我将我的解决的方法和整个思考过程与大家分享, ...
- BZOJ 3130 二分+网络流
思路: 不被题目忽悠就是思路 二分一下max 判一下等不等于最大流 搞定 7 9 1 1 2 3 1 3 3 2 3 3 3 4 2 3 5 2 3 6 1 4 7 2 5 7 2 6 7 2 这里有 ...