在React中切换排序函数

import React, { useState } from 'react';

function App() {
  const [sortFunction, setSortFunction] = useState(null);

  // 其他组件代码...

  return (
    <div>
      {/* 排序函数选择器 */}
      <select onChange={(e) => setSortFunction(e.target.value)}>
        <option value="sortByA">按A排序</option>
        <option value="sortByB">按B排序</option>
        <option value="sortByC">按C排序</option>
      </select>

      {/* 数据展示组件 */}
      <DataList data={data} sortFunction={sortFunction} />
    </div>
  );
}

function DataList({ data, sortFunction }) {
  // 根据排序函数对数据进行排序
  const sortedData = sortData(data, sortFunction);

  return (
    <ul>
      {sortedData.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

function sortData(data, sortFunction) {
  if (sortFunction === 'sortByA') {
    // 调用按A排序的函数
    return sortByA(data);
  } else if (sortFunction === 'sortByB') {
    // 调用按B排序的函数
    return sortByB(data);
  } else if (sortFunction === 'sortByC') {
    // 调用按C排序的函数
    return sortByC(data);
  } else {
    // 默认情况下不排序
    return data;
  }
}

function sortByA(data) {
  // 按A排序的具体实现
  // ...
}

function sortByB(data) {
  // 按B排序的具体实现
  // ...
}

function sortByC(data) {
  // 按C排序的具体实现
  // ...
}