基础组件(样式通过props传入的组件)
使用基础组件
在React中使用组合的思想去构建我们的UI会带来很大的灵活性, 因为我们的组件从另一个角度来看都是函数. 通过改变组件中的props进而改变组件的样式, 我们能让组件更加的可复用.
我们把color和backgroundColor属性作为组件的props传入, 另外我们新加了一个props来调整padding top和padding bottom.
const Button = ({
big,
color = colors.white,
backgroundColor = colors.blue,
...props
}) => {
const sx = {
fontFamily: 'inherit',
fontSize: 'inherit',
fontWeight: bold,
textDecoration: 'none',
display: 'inline-block',
margin: 0,
paddingTop: big ? space[2] : space[1],
paddingBottom: big ? space[2] : space[1],
paddingLeft: space[2],
paddingRight: space[2],
border: 0,
color,
backgroundColor,
WebkitAppearance: 'none',
MozAppearance: 'none'
};
return (
<button {...props} style={sx}/>
)
};
用法
const Button = () => (
<div>
<Button>
Blue Button
</Button>
<Button big backgroundColor={colors.red}>
Big Red Button
</Button>
</div>
);
// 通过Button组件的API去改变Button组件的样式,
// 我们能得到样式各异的Button.
const ButtonBig = (props) => <Button {...props} big/>;
const ButtonGreen = (props) => <Button {...props} backgroundColor={colors.green}/>;
const ButtonRed = (props) => <Button {...props} backgroundColor={colors.red}/>;
const ButtonOutline = (props) => <Button {...props} outline/>;
看完两件小事
如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:
- 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
- 关注公众号 「IT平头哥联盟」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程