Learn how to use the 'mapProps' higher-order component to modify an existing component’s API (its props). 'mapProps' takes incoming props and changes them however you’d like; for example, filtering the props by a field. For example, we have a UserLis…

mapProps介绍 mapProps函数接收一个函数参数,这个函数参数会返回一个对象用作为接下来的组件的props.组件接收到的props只能是通过mapProps函数参数返回的对象,其他的props将会被忽略 mapProps 实例 const Item = ['a', 'b', 'c', 'd']; const ListMap = mapProps(({ list }) => { return { list: list.map((e) => e + '_extends') }; })(L…

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…

SASS Bootstrap allows us to configure theme or branding variables that affect all components (e.g. Primary Color or Link Color). When we isolate our styles inside React components we lose the ability to theme them. To get round this we can put our th…

When we move from CSS to defining styles inside components we lose the ability to override styles with an external style sheet. We also lose the ability add the same class to different types of elements to style them consistently. Recompose allows us…

避免写嵌套 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…

Events are the beginning of most every stream. Recompose provides a createEventHandler function to help your create handler and stream pairs. Once the handler/stream pairs are created, it’s simply a matter of passing the handlers down the stream as p…