• 样式开关
    • Toggle并不是万能的:
      • 例子
    • 参考资料:

    样式开关

    我们也可以通过开/关某个功能来实现我们我们组件的多样性. 而这些开关我们可以通过props传递进我们的组件.

    Toggle并不是万能的:

    如果抱着toggle的想法, 我们很容易将一个组件设计成一个万能组件, 通过传入一大堆props来完成多样性, 这其实并不是特别好的实践. 所以我们最好遵守以下两点:

    • 只将必须的props传入我们的组件, 而且当props太多时需要考虑抽取子组件.
    • 不要违背单一职责原则.

    例子

    在登录表单中显示/隐藏 password

    1. class PasswordField extends Component {
    2.   render() {
    3.     const {
    4.       password,
    5.       showHidePassword,
    6.       showErrorOnTop,
    7.       showLabels,
    8.       shouldComplyAda
    9.     } = this.props;
    10.     return (
    11.       <div>
    12.         <Password
    13.           field={password}
    14.           label="Password"
    15.           showErrorOnTop={showErrorOnTop}
    16.           placeholder={shouldComplyAda ? "" : "Password"}
    17.           showLabel={showLabels}
    18.           showHidePassword={showHidePassword}
    19.         />
    20.       </div>
    21.     );
    22.   }
    23. }

    参考资料:

    • Slides from my talk: Building Multi-tenant UI with React