样式开关
我们也可以通过开/关某个功能来实现我们我们组件的多样性. 而这些开关我们可以通过props传递进我们的组件.
Toggle并不是万能的:
如果抱着toggle的想法, 我们很容易将一个组件设计成一个万能组件, 通过传入一大堆props来完成多样性, 这其实并不是特别好的实践. 所以我们最好遵守以下两点:
- 只将必须的props传入我们的组件, 而且当props太多时需要考虑抽取子组件.
- 不要违背单一职责原则.
例子
在登录表单中显示/隐藏 password
class PasswordField extends Component {
render() {
const {
password,
showHidePassword,
showErrorOnTop,
showLabels,
shouldComplyAda
} = this.props;
return (
<div>
<Password
field={password}
label="Password"
showErrorOnTop={showErrorOnTop}
placeholder={shouldComplyAda ? "" : "Password"}
showLabel={showLabels}
showHidePassword={showHidePassword}
/>
</div>
);
}
}
参考资料:
看完两件小事
如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:
- 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
- 关注公众号 「IT平头哥联盟」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程