通用组件-2021-08-21¶

统计信息：字数 2979 阅读6分钟

设计原则¶

单一职责：选择合适的粒度（例如输入框，选择框）
通用性：选择器是否支持筛选，是否支持输入；下拉菜单中是否支持子菜单，是否支持不能点的项目等
低耦合高内聚：避免依赖外部结构
行为明确：组件的形态(DOM结构)永远是千变万化的,但是其行为(逻辑)是固定的,因此通用组件的秘诀之一就是将 DOM 结构的控制权交给开发者,组件只负责行为和最基本的 DOM 结构
稳定性可扩展：没有传参或者参数不合法，可以正常显示；功能可以扩展，可以在特定的场景更改一部分功能

props¶

样式：样式基本固定，然后外部传递 style 对象，可以覆盖当前的样式
类名：外部类名覆盖内部类名
回调函数：点击不同按钮，内部的鼠标键盘事件，需要执行对应的回调函数（不传值，不执行）只是UI层的组件，直接把对应的数据通过回调函数返回外部组件中。
列表渲染：需要判断传入列表是否正确；没有列表如何渲染空界面
数据交互：尽量避免和其他组件通信，可以使用 redux 的思路，全局发出 actions 然后处理对应的逻辑，或者在业务组件中处理。

具体案例¶

ant-design 的组件

<SelectTrigger
  // 事件回调函数
  onPopupFocus={this.onPopupFocus}
  onMouseEnter={this.props.onMouseEnter}
  onMouseLeave={this.props.onMouseLeave}
  onDropdownVisibleChange={this.onDropdownVisibleChange}
  onMenuSelect={this.onMenuSelect}
  onMenuDeselect={this.onMenuDeselect}
  onPopupScroll={props.onPopupScroll}

  // 样式类名
  dropdownAlign={props.dropdownAlign}
  dropdownClassName={props.dropdownClassName}
  dropdownMatchSelectWidth={props.dropdownMatchSelectWidth}
  defaultActiveFirstOption={props.defaultActiveFirstOption}
  dropdownMenuStyle={props.dropdownMenuStyle}
  transitionName={props.transitionName}
  animation={props.animation}
  prefixCls={props.prefixCls}
  dropdownStyle={props.dropdownStyle}

  // 列表渲染
  options={options}
  inputValue={state.inputValue}
  value={state.value}
  backfillValue={state.backfillValue}

  // 功能支持
  combobox={props.combobox}
  showSearch={props.showSearch}
  multiple={multiple}
  disabled={disabled}
  visible={realOpen}
  firstActiveValue={props.firstActiveValue}
  getPopupContainer={props.getPopupContainer}
  showAction={props.showAction}
  menuItemSelectedIcon={props.menuItemSelectedIcon}
  dropdownRender={props.dropdownRender}
  ariaId={this.ariaId}

  // 外部可以获取内部DOM，进一步获取内部的属性（尽量不使用）
  ref={this.saveSelectTriggerRef}
/>

参考链接：

https://juejin.cn/post/6844903847874265101

https://blog.csdn.net/weixin_44160385/article/details/95770380

https://www.cnblogs.com/duxinyi/p/11676908.html

Last update: November 9, 2024