You can decouple the parent stream Component from the mapped React Component by using props.children
instead. This process is involves mapping the stream to React's and the then cloneElement
children
passing the props
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> ) Const Counterstream=Componentfromstream (props$={const {stream:oninc$, handler:oninc}=Createeventhandler (); const {stream:ondec$, HANDLER:ONDEC}=Createeventhandler (); returnprops$. 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=> acc + Curr). Map ((value) => ({... pr OPS, value, Oninc, Ondec})). Map (props => Cloneelement (Props.childre N, props)});
[Recompose] Stream Props to React children with RxJS