react hook封装一个排序按钮，有效果图

写一个用hook封装的点击按钮排序，请求数据的小组件。

实现操作效果：点击第一下升序，第二下降序、第三下取消排序。点击箭头下，升序。点击箭头上，降序。（可以自行更改）

作用是使这个排序在页面上许多地方能复用，少些重复代码，并且看起来更具组件化。ps如果用的不过就一个地方的话还是算了，感觉更复杂hhh...

使用到react组合模式=>children prop （也可以使用父子组件传参方式）、hook

先看下效果：

 

 

页面上使用这个组件

//------------------------------------useState--------------------------------------------

const [apply, setApply] = useState(undefined);
const [volume, setVolume] = useState(undefined);
const [clicks, setClicks] = useState(undefined);
const [releaseTime, setReleaseTime] = useState(undefined);

//------------------------------------点击的方法--------------------------------------------

const onClickSortButtonApply = (data) => {
  setApply(data);
  setReleaseTime(undefined);
  setClicks(undefined);
  setVolume(undefined);
};
const onClickSortButtonVolume = (data) => {
  setVolume(data);
  setReleaseTime(undefined);
  setApply(undefined);
  setClicks(undefined);
};
const onClickSortButtonClicks = (data) => {
  setReleaseTime(undefined);
  setApply(undefined);
  setClicks(data);
  setVolume(undefined);
};
const onClickSortButtonReleaseTime = (data) => {
  setReleaseTime(data);
  setApply(undefined);
  setClicks(undefined);
  setVolume(undefined);
};

//--------------------------------------组件使用，每增加一个按钮，如下------------------------------------------------
　　　　　　<SortButton clickButton={onClickSortButtonApply} status={apply}>
            成交量
          </SortButton>
          <SortButton clickButton={onClickSortButtonVolume} status={volume}>
            申请量
          </SortButton>
          <SortButton clickButton={onClickSortButtonClicks} status={clicks}>
            浏览量
          </SortButton>
          <SortButton clickButton={onClickSortButtonReleaseTime} status={releaseTime}>
            上架时间
          </SortButton>

这是组件：

import React, { Component, Fragment, useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons';
import styles from './index.less';

const state = {
  DEF: 0,
  DES: 1,
  ASC: 2,
};
const tranformStatus = (status) => {
  switch (status) {
    case undefined:
      return 0;
    case 1:
      return state.DES;
    case 2:
      return state.ASC;
    default:
      return 0;
  }
};

export default function sortComp({ children, clickButton, className, status }) {

  /**
   *  undefined=0 , 1=1 ,2=2
   * @type {number}
   */
  status = tranformStatus(status);

  const changeSortState = (newStatus) => {
    switch (newStatus) {
      case state.DEF:
        return 0;
      case state.DES:
        return 1;
      case state.ASC:
        return 2;
      default:
        return undefined;
    }
  };

  return <Fragment>
    <span className={`${styles.sortButton} ${className}`}><span onClick={e => {
        e.stopPropagation();
        const newStatus = status === state.DES ? state.ASC : status + 1;
        clickButton(changeSortState(newStatus));
      }}>{children}</span>
      <span className={`${styles.sortIcon}`}>
            <CaretUpOutlined
              className={`${status === state.ASC ? styles.active : styles.normal}`}
              onClick={(e) => {
                e.stopPropagation();
                clickButton(state.ASC);
              }}
            />
        <CaretDownOutlined
          className={`${status === state.DES ? styles.active : styles.normal}`}
          onClick={(e) => {
            e.stopPropagation();
            clickButton(state.DES);
          }}
        />
      </span>
    </span>
  </Fragment>;
}

默认：1降序，2升序。

思路是：接口上面搜索，一般排序如果默认就是不传，那么设置为undefined，按钮组件上面通过  tranformStatus 函数将传进来的值进行转换，然后点击时候出发changeSortState方法 返回一个值给父组件使用。子组件上面还可以通过state定义这个排序的数字多少为降序、升序。然后只要在父组件上面通过使用useState的第一个参数作为字段名称即可。

如果有更好的办法可以说下，目前觉得这个按钮封装只能这样子拉。而且用的不多的话也不是很有必要去封装...