使用React对表数据进行排序

通常，当拥有包含信息的表时，希望能够按升序或降序对表中的信息进行排序，尤其是在处理数字时。

先决条件

在我们继续之前，让我们看看我们将在本教程中使用的内容：

1. FontAwesome - 用于图标
2. Foundation - 用于一般样式。我们为表格样式使用它，因为我们不希望被本教程中的样式分散注意力
3. ReactJS - 请注意，我不打算在本教程中解释React的基础知识。通过继续我假设你之前使用它（虽然我们要做的事情并不难😄）
4. 数据 - 如上所述，我们将获得世界十大亿万富翁的名单加上他们的净资产

数据

我们将创建一个数组，其中包含亿万富翁名称及其净值十亿美元的对象：

const tableData = [
    {
        name: 'Amancio Ortega',
        net_worth: 62.7
    },
    {
        name: 'Bernard Arnault',
        net_worth: 76
    },
    {
        name: 'Bill Gates',
        net_worth: 96.5
    },
    {
        name: 'Carlos Sim Helu',
        net_worth: 64
    },
    {
        name: 'Jeff Bezos',
        net_worth: 131
    },
    {
        name: 'Larry Ellison',
        net_worth: 58
    },
    {
        name: 'Larry Page',
        net_worth: 50.8
    },
    {
        name: 'Mark Zuckerberg',
        net_worth: 62.3
    },
    {
        name: 'Michael Bloomberg',
        net_worth: 55.5
    },
    {
        name: 'Warren Buffet',
        net_worth: 82.5
    }
];

App组件

该组件将成为将在页面上生成的主要组件。它只有一些文本+ <Table />组件，它传递给我们上面声明的tableData。

const App = () => (
    <div className='text-center'>
        <h4>A list of top 10 richest billionaires.</h4>
        <p>
            Click on the icon next to "Net Worth" to see the sorting functionality
        </p>

        <Table data={tableData} />

        <small>
            * Data gathered from{' '}
            <a
                href='https://www.theweek.co.uk/people/57553/top-billionaires-who-richest-person-world'
                target='_blank'>
                theweek.co.uk
            </a>
        </small>
    </div>
);

ReactDOM.render(<App />, document.getElementById('app'));

Now that all of that is out of the way, we can focus on what's important 😉:

现在所有这一切都已经完成，我们可以专注于重要的事情😉：

表组件

它将是一个类组件，因为我们需要在其中使用状态，但首先让我们关注该render方法。我们将遍历在data，这来自父组件，我们要创建一个表行（tr数组中的每一个数据）。除此之外，我们还有一个基本的表结构（table > thead + tbody）。

class Table extends React.Component {
    render() {
        const { data } = this.props;

        return (
            data.length > 0 && (
                <table className='text-left'>
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Net Worth</th>
                        </tr>
                    </thead>
                    <tbody>
                        {data.map(p => (
                            <tr>
                                <td>{p.name}</td>
                                <td>${p.net_worth}b</td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            )
        );
    }
}

接下来，排序......

我们将有3种类型的排序：'default'，'up'（升序）， 'down'（下降）。这些类型将在一个按钮下更改，该按钮将具有FontAwesome图标，具体取决于当前活动的排序类型。让我们创建一个对象，它将为我们提供必要的信息：

const sortTypes = {
    up: {
        class: 'sort-up',
        fn: (a, b) => a.net_worth - b.net_worth
    },
    down: {
        class: 'sort-down',
        fn: (a, b) => b.net_worth - a.net_worth
    },
    default: {
        class: 'sort',
        fn: (a, b) => a
    }
};

如您所见，我们为每种类型的排序都有两个道具：

1. class - 这将由按钮中的图标使用，因为我们将看到当前活动的状态。
2. fn- 这将是function、我们在表中显示之前用于对数组中的项进行排序的方法。我们比较net_worth对象的属性。

到目前为止很棒！😄

我们还需要向Table组件添加一个currentSort状态，它将跟踪活动排序类型，最后，我们将有一个onSortChange方法，每次单击排序按钮时都会调用该方法，它将更改currentSort值。

很多单词😅，但让我们看看代码，我打赌你会明白😉：

class Table extends React.Component {
    
    state = {
        currentSort: 'default'
    };

    onSortChange = () => {
        const { currentSort } = this.state;
        let nextSort;

        if (currentSort === 'down') nextSort = 'up';
        else if (currentSort === 'up') nextSort = 'default';
        else if (currentSort === 'default') nextSort = 'down';

        this.setState({
            currentSort: nextSort
        });
    };

    render() {
        const { data } = this.props;
        const { currentSort } = this.state;

        return (
            data.length > 0 && (
                <table className='text-left'>
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>
                                Net Worth
                                <button onClick={this.onSortChange}>
                                    <i className={`fas fa-${sortTypes[currentSort].class}`} />
                                </button>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        {[...data].sort(sortTypes[currentSort].fn).map(p => (
                            <tr>
                                <td>{p.name}</td>
                                <td>${p.net_worth}b</td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            )
        );
    }
}

请注意，我们没有更改原始data数组，但是我们使用...（spread）运算符创建另一个数组，然后我们使用对象fn给定sortTypes的数组来相应地对数组进行排序。

结论

这就是它！现在您知道如何根据列中的值对表进行排序。恭喜！😄