[Recompose] Stream Props to React Children with RxJS
React to with stream Rxjs Props children
2023-09-14 09:00:50 时间
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) ) } );
相关文章
- react 实用项目分享-mock server
- [React] Refactor a Class Component with React hooks to a Function
- [React + Functional Programming ADT] Create Redux Middleware to Dispatch Actions with the Async ADT
- [React] Validate Compound Component Context Consumers
- [Poi] Customize Babel to Build a React App with Poi
- [React] Use the URL as the source of truth in React
- [React] Configure a React & Redux Application For Production Deployment and Deploy to Now
- [React Intl] Format a Date Relative to the Current Date Using react-intl FormattedRelative
- [React] Pass Data To Event Handlers with Partial Function Application
- [React Fundamentals] Introduction to Properties
- [Redux] Adding React Router to the Project
- [Typescript + React] Tip: Use generics in React to make dynamic and flexible components
- [React Typescript 2022] Use TypeScript to Type a React Class Component
- [React Testing] Test your Custom Hook Module with react-hooks-testing-library
- [React] Use CSS Transitions to Avoid a Flash of Loading State
- [React] Refactor a Class Component with React hooks to a Function
- [React + Functional Programming ADT] Connect State ADT Based Redux Actions to a React Application
- [PWA] Add Push Notifications to a PWA with React in Chrome and on Android
- [React] Create and import React components with Markdown using MDXC
- [Mobx] Using mobx to isolate a React component state
- [Poi] Customize Babel to Build a React App with Poi
- [Recompose] Refactor React Render Props to Streaming Props with RxJS and Recompose
- [Recompose] Create Stream Behaviors to Push Props in React Components with mapPropsStream
- [React] Call setState with null to Avoid Triggering an Update in React 16
- [React Fundamentals] Using Refs to Access Components
- [Redux] Adding React Router to the Project
- [React Testing] Intro to Shallow Rendering
- 【创作赢红包】Taro React组件使用(7) —— RuiLuckGrid 九宫格抽奖