React组件间条件传值实现表格列排序功能求助

要实现子组件的排序状态同步到父组件并触发数据排序，核心是状态提升——把排序状态放到父组件管理，再通过props传递给子组件使用。具体步骤如下：

1. 父组件（DevicesTable）调整：管理排序状态并传递给子组件 #

把isSorted状态移到父组件，同时定义切换排序的函数，再把状态和函数通过props传给表头组件：

import { useState } from 'react';

export default function DevicesTable() {
    // 把排序状态提升到父组件统一管理
    const [isSorted, setIsSorted] = useState(false);
    // 获取原始设备数据
    const devices = useDevices(database, firestore, urlParams, hiddenItems, filters);
    // 生成排序后的数据（浅拷贝后再排序，避免修改原数组）
    const devicesSort = [...devices].sort((a, b) => a.lastPacketTimestamp - b.lastPacketTimestamp);

    // 定义切换排序状态的函数，传给子组件调用
    const handleSortToggle = () => {
        setIsSorted(prevState => !prevState);
    };

    // 根据排序状态选择要渲染的数据源
    const displayDevices = isSorted ? devicesSort : devices;

    return (
        <TableContainer>
            <Table>
                {/* 将状态和切换函数通过props传给表头组件 */}
                <DevicesTableHeader isSorted={isSorted} onSortToggle={handleSortToggle} />
                <TableBody>
                    {/* 渲染选中的数据源 */}
                    {displayDevices.map((device) =>
                        <DevicesTableCell device={device} />)}
                </TableBody>
            </Table>
        </TableContainer>
    );
}

2. 子组件（TableHeader）调整：通过props接收状态和回调 #

去掉子组件自身的isSorted状态，直接使用父组件传递过来的props：

export default function TableHeader({ isSorted, onSortToggle }) {
    return (
        <TableHead>
            <TableRow>
                <TableCell>Device</TableCell>
                <TableCell>Last
                    {/* 点击时调用父组件传来的切换函数 */}
                    <div onClick={onSortToggle} style={{ cursor: 'pointer' }}>
                        {/* 可以通过旋转图标区分排序状态，比用同一个图标更直观 */}
                        {isSorted
                            ? <SwapVertIcon style={{ transform: 'rotate(180deg)' }} />
                            : <SwapVertIcon />
                        }
                    </div>
                </TableCell>
            </TableRow>
        </TableHead>
    );
}

额外优化建议 #

• 用useMemo缓存排序后的数据，避免每次组件渲染都重复执行排序操作，提升性能：

  import { useMemo } from 'react';
  
  const devicesSort = useMemo(() => {
      return [...devices].sort((a, b) => a.lastPacketTimestamp - b.lastPacketTimestamp);
  }, [devices]);
  

• 可以扩展排序逻辑，比如支持升序/降序循环切换，而不仅仅是“排序/不排序”的二元状态。

内容的提问来源于stack exchange，提问作者Paul