如何在React.js中通过下拉框实现数据排序？组件传值方案咨询

要在保持Dropdown和DisplayData组件独立的前提下实现排序功能，核心思路是将共享状态提升到父组件App.js，通过React单向数据流传递状态和回调，具体步骤如下：

1. 改造父组件App.js #

把排序状态和数据排序逻辑放在App组件中，作为两个子组件的中间协调者：

import { useState } from 'react';
import DropDown from './DropDown';
import DisplayData from './DisplayData';

// 原始数据抽离到父组件（也可单独存文件，提升维护性）
const rawRecords = [
    { SR: 1, Name: 'Aakash', Age: 25 },
    { SR: 4, Name: 'Zahir', Age: 32 },
    { SR: 3, Name: 'Mohan', Age: 23 },
    { SR: 2, Name: 'Parul', Age: 42 },
    { SR: 9, Name: 'Himanshu', Age: 18 },
];

function App() {
    // 管理排序类型状态，默认升序
    const [sortType, setSortType] = useState('lowtohigh');

    // 根据排序类型处理数据（浅拷贝原数组避免修改原始数据）
    const sortedRecords = [...rawRecords].sort((a, b) => {
        return sortType === 'lowtohigh' ? a.Age - b.Age : b.Age - a.Age;
    });

    // 接收Dropdown的选择事件，更新排序状态
    const handleSortChange = (e) => {
        setSortType(e.target.value);
    };

    return (
        <div className="App">
            {/* 传递当前排序值和回调给Dropdown */}
            <DropDown sortType={sortType} onSortChange={handleSortChange} />
            {/* 传递排序后的数据给DisplayData */}
            <DisplayData data={sortedRecords} />
        </div>
    );
}

export default App;

2. 修改Dropdown组件（受控组件） #

让Dropdown只负责接收父组件的状态和回调，专注于选择交互，不管理内部状态：

const DropDown = ({ sortType, onSortChange }) => {
    return (
        <>
            <select value={sortType} onChange={onSortChange}>
                <option value="lowtohigh">Age: Low to High</option>
                <option value="hightolow">Age: High to Low</option>
            </select>
        </>
    );
};

export default DropDown;

3. 修改DisplayData组件（纯展示组件） #

移除内部的数据定义，改为接收父组件传入的数据，专注于渲染逻辑：

const DisplayData = ({ data }) => {
    return (
        <>
            <table>
                {/* 添加表头提升表格可读性 */}
                <tr>
                    <th>SR</th>
                    <th>Name</th>
                    <th>Age</th>
                </tr>
                {data.map((rec, index) => (
                    <tr key={index}>
                        <td>{rec.SR}</td>
                        <td>{rec.Name}</td>
                        <td>{rec.Age}</td>
                    </tr>
                ))}
            </table>
        </>
    );
};

export default DisplayData;

方案优势 #

• 组件职责清晰：Dropdown仅处理选择交互，DisplayData仅负责数据渲染，各自保持独立可复用性
• 遵循单向数据流：状态由父组件统一管理，子组件通过props接收数据和回调，避免组件间直接耦合

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