Learn how to use the ‘flattenProp’ higher order component to take a single object prop and spread each of its fields out as a prop. For example,we have a 'redux-react' like app: import React from 'react'; import { withProps } from 'recompose'; // Moc…

Learn how to user the ‘componentFromProp’ helper and ‘defaultProps’ higher order component to swap the underlying html tag of your component. Sometimes we want a component to behave the same overall but to use a different element in the HTML output.…

When you declare your Component and Props in JSX, you can pass those props along to your RxJS stream. This is typically done using switchMap or combineLatest where you can grab from the props from your props$ stream and push them into another stream.…

Learn how to use the 'withPropsOnChange' higher order component to help ensure that expensive prop computations are only executed when necessary. Simply specify which props are “expensive” and provide a factory function for those props. withPropsOnCh…

Learn how to use the ‘withProps’ higher order component to pre-fill a prop, unable to be overridden. const { Component } = React; const { withProps } = Recompose; // with function as arguement const HomeLink = withProps(({ query }) => ({ href: '#/?qu…

In CSS we use the descendant selector to style elements based on their nesting. Thankfully in React we don't need to consider this most of the time because this nesting of elements happens within the bounds of a single component. However occasionally…

避免写嵌套 import { compose } from "recompose"; function Message(props) { const { classes } = props; return ( ... ); } const styles = theme => ({ close: { padding: theme.spacing.unit / 2, }, }); // @withStyles(styles) @observer class Message ... e…

Functions created with mapPropsStream canned be composed together to build up powerful streams. Bring in the compose helper from Recompose then simply list your functions in the order you want the props to push through. In the example, we compose thr…

Rather than using Components to push streams into other Components, mapPropsStream allows you to create functions that can wrap components to create shareable behaviors across components. Using componentFromStream: import React from "react" impo…

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 belo…