样式函数(Style Functions)

因为在React中可以很方便的使用JavaScript, 所以我们能使用helper函数来帮我们处理样式相关的问题.

第一个例子

一个用rgba格式来创造黑色的函数.

  1. const darken = (n) => `rgba(0, 0, 0, ${n})`;
  2. darken(1 / 8); // 'rgba(0, 0, 0, 0.125)'
  3. const shade = [
  4. darken(0),
  5. darken(1 / 8),
  6. darken(1 / 4),
  7. darken(3 / 8),
  8. darken(1 / 2),
  9. darken(5 / 8),
  10. darken(3 / 4),
  11. darken(7 / 8),
  12. darken(1)
  13. ];
  14. // 现在,
  15. // shade[4] 就是 'rgba(0, 0, 0, 0.5)'

第二个例子

给margin 和 padding创建一个比例来保持视觉节奏的一致.

  1. // Modular powers of two scale
  2. const scale = [
  3. 0,
  4. 8,
  5. 16,
  6. 32,
  7. 64
  8. ];
  9. // 通过这个函数去取得一部分的样式
  10. const createScaledPropertyGetter = (scale) => (prop) => (x) => {
  11. return (typeof x === 'number' && typeof scale[x] === 'number')
  12. ? {[prop]: scale[x]}
  13. : null
  14. };
  15. const getScaledProperty = createScaledPropertyGetter(scale);
  16. export const getMargin = getScaledProperty('margin');
  17. export const getPadding = getScaledProperty('padding');
  18. // 样式函数的用法
  19. const Box = ({
  20. m,
  21. p,
  22. ...props
  23. }) => {
  24. const sx = {
  25. ...getMargin(m),
  26. ...getPadding(p)
  27. };
  28. return <div {...props} style={sx}/>
  29. };
  30. // 组件用法.
  31. const Box = () => (
  32. <div>
  33. <Box m={2} p={3}>
  34. A box with 16px margin and 32px padding
  35. </Box>
  36. </div>
  37. );