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)
          )
      }
    );

  • 相关阅读:
    AtCoder Grand Contest 015 C
    AtCoder Grand Contest 011 F
    AtCoder Regular Contest 076 E
    AtCoder Grand Contest 016 B
    AtCoder Grand Contest 010 F
    AtCoder Regular Contest 081 F
    AtCoder Grand Contest 018 D
    AtCoder Regular Contest 076 F
    yii2.0 如何按需加载并管理CSS样式及JS脚本
    ebay商品基本属性组合成数据表格式,可用上传到系统递交数据
  • 原文地址:https://www.cnblogs.com/Answer1215/p/8087390.html
Copyright © 2011-2022 走看看