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

  • 相关阅读:
    doT.js——前端javascript模板引擎问题备忘录
    (转)regex类(个人理解)
    ajax提交表单、ajax实现文件上传
    SQL添加表字段
    Elasticsearch使用总结
    有一张表里面有上百万的数据,在做查询的时候,如何优化?从数据库端,java端和查询语句上回答
    sql语句的字段转成Date
    Mybatis 示例之 foreach
    Eclipse不编译解决方案
    Java使用RSA加密解密及签名校验
  • 原文地址:https://www.cnblogs.com/Answer1215/p/8087390.html
Copyright © 2011-2022 走看看