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的第一個參數作為字段名稱即可。

如果有更好的辦法可以說下，目前覺得這個按鈕封裝只能這樣子拉。而且用的不多的話也不是很有必要去封裝...