[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 React. This lesson shows you how to configure Recompose to use RxJS then create a Streaming Component with Recompose’s componentFromStream helper function.
import React from "react"
import { render } from "react-dom"
import { Observable } from "rxjs"
import config from "recompose/rxjsObservableConfig"
import {
setObservableConfig,
componentFromStream
} from "recompose" setObservableConfig(config) /*
APP Start
*/ const App = componentFromStream(props$ => props$.map(props => <h1>{props.message}</h1>)) render(<App message="Hello World!" />, document.getElementById("root"))
[Recompose] Configure Recompose to Build React Components from RxJS Streams的更多相关文章
- [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 ...
- [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 cre ...
- [React] Styling React Components With Aphrodite
Aphrodite is a library styling React components. You get all the benefits of inline styles (encapsul ...
- Rendering React components to the document body
React一个比较好用的功能是其简单的API,一个组件可以简单到一个return了组件结构的render函数.除了一个简单的函数之外,我们还有了一段有用且可复用的代码片段. 问题 不过有时候可能会受到 ...
- React Components Template
React Components Template "use strict"; /** * * @author xgqfrms * @license MIT * @copyrigh ...
- Installing Wine 1.5: configure: error: Cannot build a 32-bit program, you need to install 32-bit development libraries(转载)
Installing Wine 1.5: configure: error: Cannot build a 32-bit program, you need to install 32-bit dev ...
- [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 ...
- React Components之间的通信方式了解下
先来几个术语: 官方 我的说法 对应代码 React element React元素 let element=<span>A爆了</span> Component 组件 cla ...
- [Poi] Use Markdown as React Components by Adding a Webpack Loader to Poi
Poi ships with many webpack loaders included, but you may run into scenarios where you'll need to cu ...
随机推荐
- 监控RMAN操作进度的脚本
REM ------------------------------- REM Script to monitor rman backup/restore operations REM To run ...
- BZOJ 2287 【POJ Challenge】消失之物(DP+容斥)
2287: [POJ Challenge]消失之物 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 986 Solved: 572[Submit][S ...
- 【Tool】Linux下的Spark安装及使用
1. 确保自己的电脑安装了JAVA Development Kit JDK, 用来编译Java应用, 如 Apache Ant, Apache Maven, Eclipse. 这里是我们安装Spark ...
- 通过nodeSelector配置项实现pod部署至指定node
Node节点添加标签 [root@node1 work]# kubectl label nodes node1 node=master --overwrite node/node1 labeled [ ...
- oracle和mysql的分页
如果我们是通过JDBC的方式访问数据库,那么就有必要根据数据库类型采取不同的SQL分页语句,对于MySql数据库,我们可以采用limit语句进行分页,对于Oracle数据库,我们可以采用rownum的 ...
- virt-install 创建虚拟机
[root@kvm-server vm]# qemu-img create -f qcow2 centos69b-disk0.qcow2 10G Formatting 'centos69b-disk0 ...
- 微信小程序的开启授权,当单机取消授权后 再次授权
//单机去搜索 toSearch:function(){ this.getLocation(res => { console.log('成功') wx.navigateTo({ url: `.. ...
- nginx proxy_set_header设置,自定义header
在实际应用中,我们可能需要获取用户的ip地址,比如做异地登陆的判断,或者统计ip访问次数等,通常情况下我们使用request.getRemoteAddr()就可以获取到客户端ip,但是当我们使用了ng ...
- hdu5282 最长公共子序列的变形
pid=5282">http://acm.hdu.edu.cn/showproblem.php?pid=5282 Problem Description Xuejiejie loves ...
- RvmTranslator7.1
RvmTranslator7.1 eryar@163.com RvmTranslator can translate the RVM file exported by AVEVA Plant(PDMS ...