上QQ阅读APP看书，第一时间看更新

There's more...

If you find that you're using the same breakpoints over and over in your layouts, you can include them in in your higher-order Item component. Let's rewrite the example so that, in addition to the Item property, the xs, sm, and md properties are included as well:

const Container = props => <Grid container {...props} />;
const Item = props => <Grid item xs={12} sm={6} md={3} {...props} />;

const AbstractingContainersAndItems = withStyles(styles)(
  ({ classes }) => (
    <div className={classes.root}>
      <Container spacing={4}>
        <Item>
          <Paper className={classes.paper}>xs=12 sm=6 md=3</Paper>
        </Item>
        <Item>
          <Paper className={classes.paper}>xs=12 sm=6 md=3</Paper>
        </Item>
        <Item>
          <Paper className={classes.paper}>xs=12 sm=6 md=3</Paper>
        </Item>
        <Item>
          <Paper className={classes.paper}>xs=12 sm=6 md=3</Paper>
        </Item>
      </Container>
    </div>
  )
);

Now, instead of four instances of <Item xs={12} sm={6} md={3}>, you have four instances of <Item>. Component abstractions are a great tool for removing excess syntax from your JavaScript XML (JSX) markup.

Any time you need to override any of the breakpoint properties that you've set in the Item component, you just need to pass the property to Item. For example, if you have a specific case where you need md to be 6, you can just write <Item md={6}>. This works because, in the Item component, {...props} is passed after the default values, meaning that they override any properties with the same name.