本文共 6555 字，大约阅读时间需要 21 分钟。
react 数据库排序
Often when you have a table with information you'd want to be able to sort the information in the table in ascending or descending order, especially when you are dealing with numbers.
通常，当您拥有一个包含信息的表时，希望能够以升序或降序对表中的信息进行排序，尤其是在处理数字时。
In this tutorial we're going to see how to do exactly that using ReactJS.
在本教程中，我们将看到如何使用ReactJS完全做到这一点。
Here's what we're going to build:
这是我们要构建的：
We have a list of the top 10 billionaires in the world and we want to sort the list based on the net worth of the billionaires. I got the list information from website.
我们列出了全球排名前10位的亿万富翁，我们希望根据亿万富翁的净资产对列表进行排序。 我从网站上获得了列表信息。
Before we move on, let's see the things that we're going to use in this tutorial:
在继续之前，让我们看看在本教程中将要使用的东西：
- for icons
用于图标
- for general styling. We're using this especially for the table styling as we don't want to get distracted by the styling in this tutorial
-一般样式。 我们特别将其用于表格样式，因为我们不想被本教程中的样式分散注意力
- please note that I'm not going to explain the basics of React in this tutorial. By continuing I'm assuming that you worked with it before (although the things that we're going to do aren't hard at all ?)
请注意 ，我不会在本教程中解释React的基础知识。 通过继续，我假设您以前曾使用过它(尽管我们要做的事情一点也不难吗？)
We're going to create an array with objects containing the name of the billionaires and their net worth in billion USD:
我们将创建一个包含对象的数组，这些对象包含亿万富翁的姓名及其净资产(十亿美元)：
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 }]; This component will the be main one which will be generated on the page. It only has some text + the <Table /> component and it's passing down to it the tableData we declared above.
该组件将是将在页面上生成的主要组件。 它只有一些文本+ <Table />组件，并且将我们上面声明的tableData传递给它。
const App = () => ();ReactDOM.render(A list of top 10 richest billionaires.
Click on the icon next to "Net Worth" to see the sorting functionality
* Data gathered from{' '} theweek.co.uk
, document.getElementById('app'));
Now that all of that is out of the way, we can focus on what's important ?:
现在所有这些都已解决，我们可以专注于重要的是什么：
It'll be a class component as we need to use the state in it, but first let's focus on the render method. We'll map over the data that's coming from the parent component and we'll create a table row (tr) for every data in the array. Alongside that we have a basic table structure (table > thead + tbody).
这将是一个类组件，因为我们需要在其中使用状态，但首先让我们关注于render方法。 我们将map在data这是一个从父组件来了，我们要创建一个表行( tr数组中的每一个数据)。 除此之外，我们还有一个基本的表结构( table > thead + tbody )。
class Table extends React.Component { render() { const { data } = this.props; return ( data.length > 0 && ( | Name | Net Worth |
|---|---|
| {p.name} | ${p.net_worth}b |
Next, the sorting...
接下来，排序...
We're going to have 3 types of sorts: 'default', 'up' (ascending), 'down' (descending). These types will be changed with the aid of a button which will have a FontAwesome icon depending which sort type is currently active. Let's create an object which will give us the necessary information:
我们将有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 }}; As you can see, we have two props for each type of sorts:
如您所见，每种类型的我们都有两个道具：
class - this will be used by the icon in the button as we'll see which state is currently active
class按钮中的图标将使用它，因为我们将看到当前处于哪个状态
fn - this will be the function that we'll use to sort the items in the array before we display it in the table. Basically we're comparing the net_worth property of the objects
fn这将是我们在表中显示数组之前将其用于对数组中的项目进行排序的function 。 基本上，我们正在比较对象的net_worth属性
Great so far! ?
到目前为止很好！ ？
We also need to add a currentSort state to the Table component which will keep track of the active sort type and finally, we'll have an onSortChange method which will be called every time the sort button will be clicked and it will change the currentSort value.
我们还需要向Table组件添加一个currentSort状态，该状态将跟踪活动的排序类型，最后，我们将有一个onSortChange方法，该方法将在每次单击排序按钮时调用，它将更改currentSort值。
A lot of words ?, but let's see the code and I bet you'll understand ?:
很多话吗？，但是让我们看一下代码，我敢打赌，您会明白的吗？：
class Table extends React.Component { // declaring the default state state = { currentSort: 'default' }; // method called every time the sort button is clicked // it will change the currentSort value to the next one 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 && ( | Name | Net Worth |
|---|---|
| {p.name} | ${p.net_worth}b |
Notice that we're not changing the original data array, but we're creating another array with the ... (spread) operator, and then we're using the fn given by the sortTypes object to sort the array accordingly.
请注意，我们并没有更改原始data数组，而是使用... (spread)运算符创建了另一个数组，然后使用sortTypes对象给定的fn对数组进行相应的排序。
That's pretty much it! Now you know how to sort a table based on the values in a column. Congratulations!
差不多了！ 现在您知道了如何根据列中的值对表进行排序。 恭喜你！
Happy Coding!
编码愉快！
Originally posted on
最初发布在
翻译自:
react 数据库排序
转载地址：http://tshwd.baihongyu.com/