复用utils工具方法

正常直接引入

import {getInfo,getMessage} from './handler'

同一组件，引用不同的数据处理方法

利用class类和this

多选组件：

• 场景一（scene=industry）：多选页面行业
• 场景二（scene=age）：多选页面年龄

• 点击行业多选按钮-跳转多选行业页面localhost:3000/industryList?scene=industry

  • 组件：onSelect={this.handler.handleSelectClick} this.handler就是./handle.tsx根据url上scene获取
  • 根据接口获取行业列表
  • 点击行业事件handleClick

• 点击行业多选按钮-跳转多选行业页面localhost:3000/ageList?scene=age

  • 组件：onSelect={this.handler.handleSelectClick}
  • 根据接口获取行业年龄列表
  • 点击行业事件handleClick

数据、点击事件逻辑一样内容不一样，只是组建不一样，可以封装一个class，工具类内部也可以直接拿到this

./handle.tsx
export function Handler(ref) {
  const {scene} = ref.urlParams; //可以直接拿到this。并使用this.setState修改数据，存储选中数据
  switch (scene) {
    case 'industry':
      return new JobHandler(ref); //处理方法放在this中
    case 'job':
      return new AgeHandler(ref);   //处理方法放在this中，
  }
}

相当于把class内this上的方法单独拿出来封装起来，根据不同场景区分，可读性比较强。