react中的排序对每个组件进行排序

import React, { useState } from 'react';

const ComponentList = () => {
  const [components, setComponents] = useState([
    { id: 1, name: 'Component A' },
    { id: 2, name: 'Component B' },
    { id: 3, name: 'Component C' },
  ]);

  const sortComponents = () => {
    const sortedComponents = [...components].sort((a, b) => {
      return a.name.localeCompare(b.name); // 按名称进行排序
    });
    setComponents(sortedComponents);
  };

  return (
    <div>
      <button onClick={sortComponents}>排序组件</button>
      {components.map((component) => (
        <div key={component.id}>{component.name}</div>
      ))}
    </div>
  );
};

export default ComponentList;