02.toggle-ui-elements.md

样式开关

我们也可以通过开/关某个功能来实现我们我们组件的多样性. 而这些开关我们可以通过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>
    );
  }
}

参考资料:

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