做Angular命令的React方式是什么？

Question

从Angular进行orderBy过滤的React方法是什么？

在这个例子中，你如何按年龄订购动物？

CodePen

class Application extends React.Component {
  constructor(props){
    super(props);
    this.state={
      animals: [
        {id: 1, age: 5, type: "cat"}, 
        {id: 2, age: 3, type: "dog"},
        {id: 3, age: 10, type: "wolf"}
      ]
    }
  }
  render() {
    let {animals} = this.state;

    return (
      <div>
        {animals.map((animal)=>{
          return (<p key={animal.id}>{animal.type}</p>)
        })}
      </div>
    )
  }
}

Answer 1

您需要做的就是在渲染对象时对其进行排序：

Authorization

Answer 2

您可以使用lodash

只需将其安装为依赖项

即可

npm install --save lodash

并导入

let _ = require('loadash')

  render() {
    let {animals} = this.state;
    let animalsByAge = _.orderBy(animals, 'age')

    return (
      <div>
        {animalsByAge.map((animal)=>{
          return (<p key={animal.id}>{animal.type}</p>)
        })}
      </div>
    )
  }