zoukankan      html  css  js  c++  java
  • [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)
          )
      }
    );

  • 相关阅读:
    弹性网卡支持私网多IP
    微服务浪潮中,程序猿如何让自己 Be Cloud Native
    Nacos v0.7.0:对接CMDB,实现基于标签的服务发现能力
    如何更高效的管理原生微服务应用
    如何在 Intellij IDEA 更高效地将应用部署到容器服务 Kubernetes
    PHP flock文件锁
    MySQL锁(MyISAM和InnoDB)
    汽车操作系统革命:封闭还是开源?
    采集百度top500歌曲,python2.7.2
    关于revision 的cover letter
  • 原文地址:https://www.cnblogs.com/Answer1215/p/8087390.html
Copyright © 2011-2022 走看看