[Recompose] Stream Props to React Children with RxJS
You can decouple the parent stream Component from the mapped React Component by using props.children
instead. This process involves mapping the stream to React’s cloneElement
with the children
then passing the props
in manually.
We have the code below:
- import React from "react"
- import { render } from "react-dom"
- import { Observable } from "rxjs"
- import config from "recompose/rxjsObservableConfig"
- import {
- setObservableConfig,
- componentFromStream,
- createEventHandler
- } from "recompose"
- setObservableConfig(config)
- const Counter = ({ value, onInc, onDec }) => (
- <div>
- <button onClick={onInc}>+</button>
- <h2>{value}</h2>
- <button onClick={onDec}>-</button>
- </div>
- )
- const CounterStream = componentFromStream(
- props$ => {
- const { stream: onInc$, handler: onInc } = createEventHandler();
- const { stream: onDec$, handler: onDec } = createEventHandler();
- return props$
- .switchMap(
- propos => Observable.merge(
- onInc$.mapTo(1),
- onDec$.mapTo(-1)
- )
- .startWith(propos.value)
- .scan((acc, curr) => acc + curr)
- .map((value) => ({ value, onInc, onDec })))
- .map(
- Counter
- )
- }
- );
- const App = () => (
- <div>
- <CounterStream value={3} />
- </div>
- )
- render(<App />, document.getElementById("root"))
Now inside we use:
- <CounterStream value={4} />
We want pass child into it:
- const App = () => (
- <div>
- <CounterStream value={3}>
- <Counter />
- </CounterStream>
- </div>
- )
So now, instead we map to Counter map in the JXS, we want to clone the child elemenet and pass down new props:
- const CounterStream = componentFromStream(
- props$ => {
- const { stream: onInc$, handler: onInc } = createEventHandler();
- const { stream: onDec$, handler: onDec } = createEventHandler();
- return props$
- .switchMap(
- props => Observable.merge(
- onInc$.mapTo(1),
- onDec$.mapTo(-1)
- )
- .startWith(props.value)
- .scan((acc, curr) => acc + curr)
- .map((value) => ({ ...props, value, onInc, onDec }))
- ).map(props =>
- cloneElement(props.children, props)
- )
- }
- );
[Recompose] Stream Props to React Children with RxJS的更多相关文章
- [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中props.children和React.Children的区别
在React中,当涉及组件嵌套,在父组件中使用props.children把所有子组件显示出来.如下: function ParentComponent(props){ return ( <di ...
- 对React children 的深入理解
React的核心为组件.你可以像嵌套HTML标签一样嵌套使用这些组件,这使得编写JSX更加容易因为它类似于标记语言. 当我刚开始学习React时,当时我认为“使用 props.children 就这么 ...
- React.Children详解
React.Children提供了处理this.props.children的工具,this.props.children可以任何数据(组件.字符串.函数等等).React.children有5个方法 ...
- react children技巧总结
在使用该技巧时,建议先看一下相关的知识,点我查看 假如使用该属性时,想把父组件的所有属性及部分方法传递给子组件,该怎么办呢?看代码 const Child = ({ doSomething, valu ...
- [React] Compound Component (React.Children.map & React.cloneElement)
Imaging you are building a Tabs component. If looks like: <Tabs> <TabList> <Tab> o ...
- [React] Understand React.Children Utilities
The data contained in this.props.children is not always what you might expect. React provides React. ...
- React源码 React.Children
children是什么意思呢?就是我们拿到组件内部的props的时候,有props.children这么一个属性,大部分情况下,我们直接把 props.children 渲染到 JSX 里面就可以了. ...
- React Children 使用
React 有一个特殊的属性children, 主要用于组件需要渲染内容,但它并不知道具体要渲染什么内容,怎么会有这种使用场景?确实比较少,但并不是没有,比如弹出框.当你写一个弹出框组件的时候,你知道 ...
随机推荐
- java开发过程中几种常用算法
排序算法 排序算法中包括:简单排序.高级排序 简单排序 简单排序常用的有:冒泡排序.选择排序.插入排序 冒泡排序代码如下: private static void bubbleSrot(int[] a ...
- Ubuntu上面安装docker
1.先用uname -r查看系统的信息 2.安装docker的命令为 sudo apt install docker.io 3.然后就能实现安装了 但是:运行docker search golang, ...
- k8s日志收集配置
容器日志样例 172.101.32.1 - - [03/Jun/2019:17:14:10 +0800] "POST /ajaxVideoQueues!queryAllUser.action ...
- Linux 操作基础(一) -- Shell 命令格式和元字符
1 命令格式 cmd [-选项] [参数] 说明: • 最简单的Shell命令只有命令名,复杂的Shell命令可以有多个选项和参数 • 参数是文件也可以是目录,有些命令必须使用多个操作对象 • 并非所 ...
- Linux头文件的设置
GCC/G++会查找系统默认的include和link的路径,以及自己在编译命令中指定的路径. 1.include头文件路径 除了默认的/usr/include, /usr/local/include ...
- POJ 1161 Walls(最短路+枚举)
POJ 1161 Walls(最短路+枚举) 题目背景 题目大意:题意是说有 n个小镇,他们两两之间可能存在一些墙(不是每两个都有),把整个二维平面分成多个区域,当然这些区域都是一些封闭的多边形(除了 ...
- Android中的AsyncTask异步任务的简单实例
在 Android中的AsyncTask异步任务的简介 一文中.已经对 安卓 异步任务操作做了简单的介绍.这里,直接将上文中的异步任务做了一个实例.实现异步操作更新UI线程,相比开启子线程更新来说逻辑 ...
- iOS_青花瓷Charles抓包
使用青花瓷Charles抓取手机端的网络请求: 第一步,下载安装并打开Charles watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcHJlX2VtaW5l ...
- HDU 5310 Souvenir
Souvenir Accepts: 901 Submissions: 2743 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 262 ...
- Android学习笔记(9):使用XML文件和Java代码控制UI界面
Android推荐使用XML文件设置UI界面.然后用Java代码控制逻辑部分,这体现了MVC思想. MVC全名是Model View Controller.是模型(model)-视图(view)-控制 ...