javascript - 如何在像AngularJS这样的ReactJS中排序(How to sort an aray in ReactJS like AngularJS)

Question

In AngularJS is possible sort an array like this ng-repeat="user in users | orderBy: order" and i need to know how do this in ReactJS, here is an exemple of this in AngularJS(在AngularJS中可以对像这样的数组进行排序ng-repeat="user in users | orderBy: order" ，我需要知道如何在ReactJS中做到这一点，这是AngularJS中的一个例子)

 const myApp = angular.module('myApp', []) myApp.controller('myAppController', ['$scope', $scope => { $scope.users = [ { name: 'Maria', age: 16, color: 'red' }, { name: 'Mike', age: 18, color: 'black' }, { name: 'John', age: 23, color: 'green' }, { name: 'Liza', age: 21, color: 'yellow' } ] $scope.order = 'name' $scope.orderBy = orderBy => $scope.order = orderBy }]) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script> <table ng-app="myApp" ng-controller="myAppController"> <tr> <th ng-click="orderBy('name')">Name</th> <th ng-click="orderBy('age')">Age</th> <th ng-click="orderBy('color')">Color</th> </tr> <tr ng-repeat="user in users | orderBy: order"> <td>{{user.name}}</td> <td>{{user.age}}</td> <td>{{user.color}}</td> </tr> </table> 

  ask by Jefter Rocha translate from so

Answer 1

React.js is a plain javascript.(React.js是一个普通的javascript。)

You should use Array.prototype.sort .(您应该使用Array.prototype.sort 。)
Created stackblitz for you.(为您创建了stackblitz 。)

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React',
      order: 'name',
      users: [
        { name: 'Maria', age: 16, color: 'red' },
        { name: 'Mike', age: 18, color: 'black' },
        { name: 'John', age: 23, color: 'green' },
        { name: 'Liza', age: 21, color: 'yellow' }
      ]
    };
    this.sort = this.sort.bind(this); 
    this.setOrder = this.setOrder.bind(this); 
  }

  setOrder(e) {
    const order = e.target.dataset.order;

    this.setState({order});
  }

  sort(a, b) {
    if (!this.state.order) return 0;
    if(a[this.state.order] < b[this.state.order]) { return -1; }
    if(a[this.state.order] > b[this.state.order]) { return 1; }
    return 0;
  }

  render() {
    return (
      <div>
        <button data-order='name' onClick={this.setOrder}>by name</button>
        <button data-order='color' onClick={this.setOrder}>by color</button>
        {this.state.users.sort(this.sort).map(user => <div>name: {user.name}, color: {user.color}</div>)}
      </div>
    );
  }
}

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