JavaScript仅状态变量不同的重复函数如何实现复用？

核心思路 #

将两个函数中唯一的差异点「状态字段名」抽为入参，封装统一的选中切换逻辑，同时修正原代码直接修改State原值的不规范写法。

具体实现 #

1. 封装通用逻辑函数 #

toggleSelected(stateKey, id) {
  // 先浅拷贝State中的数组，避免直接修改原值导致渲染异常
  const selected = [...this.state[stateKey]]
  const findIndex = selected.indexOf(id)

  if (findIndex > -1) {
    selected.splice(findIndex, 1)
  } else {
    selected.push(id)
  }

  // 用计算属性动态更新对应的State字段
  this.setState({
    [stateKey]: selected
  })
}

注：原代码存在写法隐患：直接对this.state中的数组执行splice/push属于直接修改State原值，不符合React State不可变的设计原则，上述代码已做修复。

2. 业务场景调用 #

你可以保留原来的两个函数入口，内部直接调用通用函数即可，不需要重复写逻辑：

onChange(id) {
  this.toggleSelected('selectedDevice', id)
}

onChangeSec(id) {
  this.toggleSelected('selectedSection', id)
}

如果不想额外定义两个入口函数，也可以在绑定事件的时候直接传参调用：

// 设备选择组件绑定
<DeviceSelect onChange={(id) => this.toggleSelected('selectedDevice', id)} />

// 分区选择组件绑定
<SectionSelect onChange={(id) => this.toggleSelected('selectedSection', id)} />

内容的提问来源于stack exchange，提问作者claudio romano