基础组件(样式通过props传入的组件)

优质
小牛编辑
134浏览
2023-12-01

使用基础组件

在React中使用组合的思想去构建我们的UI会带来很大的灵活性, 因为我们的组件从另一个角度来看都是函数.
通过改变组件中的props进而改变组件的样式, 我们能让组件更加的可复用.

我们把color和backgroundColor属性作为组件的props传入, 另外我们新加了一个props来调整padding top和padding bottom.

  1. const Button = ({
  2. big,
  3. color = colors.white,
  4. backgroundColor = colors.blue,
  5. ...props
  6. }) => {
  7. const sx = {
  8. fontFamily: 'inherit',
  9. fontSize: 'inherit',
  10. fontWeight: bold,
  11. textDecoration: 'none',
  12. display: 'inline-block',
  13. margin: 0,
  14. paddingTop: big ? space[2] : space[1],
  15. paddingBottom: big ? space[2] : space[1],
  16. paddingLeft: space[2],
  17. paddingRight: space[2],
  18. border: 0,
  19. color,
  20. backgroundColor,
  21. WebkitAppearance: 'none',
  22. MozAppearance: 'none'
  23. };
  24. return (
  25. <button {...props} style={sx}/>
  26. )
  27. };

用法

  1. const Button = () => (
  2. <div>
  3. <Button>
  4. Blue Button
  5. </Button>
  6. <Button big backgroundColor={colors.red}>
  7. Big Red Button
  8. </Button>
  9. </div>
  10. );
  11. // 通过Button组件的API去改变Button组件的样式,
  12. // 我们能得到样式各异的Button.
  13. const ButtonBig = (props) => <Button {...props} big/>;
  14. const ButtonGreen = (props) => <Button {...props} backgroundColor={colors.green}/>;
  15. const ButtonRed = (props) => <Button {...props} backgroundColor={colors.red}/>;
  16. const ButtonOutline = (props) => <Button {...props} outline/>;