什么是做 Angular 的 orderBy 的 React 方式

克里斯蒂安·穆斯卡卢

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

在此示例中,您将如何按年龄对动物进行排序?

代码笔

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>
    )
  }
}
之中

您需要做的就是在渲染对象时对它们进行排序:

  render() {
    let {animals} = this.state;

    return (
      <div>
      {[...animals].sort((a,b) => {return a.age - b.age}).map((animal)=>{
        return (<p key={animal.id}>{animal.type}</p>)
      })}
    </div>
    )
  }

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

以“类型安全”的方式做某事意味着什么?

来自分类Dev

为什么angular2用这种方式声明接口?

来自分类Dev

在 Angular 5 中授权用户的最佳方式是什么

来自分类Dev

使用React钩子更新动态状态的方式是什么?

来自分类Dev

为什么以这种方式命名React钩子使用XXX?

来自分类Dev

封装 React 应用程序的最佳方式是什么?

来自分类Dev

我以错误的方式解决了Euler#15项目。为什么要这样做?

来自分类Dev

我用错误的方式解决了Euler#15项目。为什么要这样做?

来自分类Dev

Angular 2.如何应用orderBy?

来自分类Dev

使用orderBy Angular后获取SORTED数组

来自分类Dev

Angular 安装的更好方式

来自分类Dev

Angular世界中React的“ $ emit”是什么

来自分类Dev

如何以Rails的方式来做?

来自分类Dev

为什么C#OrderBy这么快?

来自分类Dev

Angular 2 RC5编写基于模板的表单的方式是什么?

来自分类Dev

从Angular2到Electron并进行回传的最佳方式是什么?

来自分类Dev

相同的数据在angular9中的显示方式不同。为什么?

来自分类Dev

可实例化的Angular服务-我还可以通过其他什么方式重写它?

来自分类Dev

使用Angular $ Resource,使用多个api调用创建服务的角度方式是什么?

来自分类Dev

为什么以下Angular 1.6代码无法通过这种方式过滤为小写?

来自分类Dev

仅在首次访问 Angular 时显示页面的最佳方式是什么?

来自分类Dev

什么是设置粘性页眉 + 页脚 + 路由器出口高度的最佳方式:Angular 2 +

来自分类Dev

React.js处理可见性=隐藏的方式是什么?

来自分类Dev

在React组件之间使用自定义api客户端的惯用方式是什么?

来自分类Dev

为什么无论状态是对象还是字符串,React都会以不同的方式重新渲染?

来自分类Dev

为什么用 ES6 方式定义 React 组件构造函数不起作用?

来自分类Dev

-React Native,状态数据从A.js传递到B.js的方式是什么

来自分类Dev

react中定义方法的两种方式,有什么不同?

来自分类Dev

在 React Native 项目中使用 java 库的方式是什么?

Related 相关文章

  1. 1

    以“类型安全”的方式做某事意味着什么?

  2. 2

    为什么angular2用这种方式声明接口?

  3. 3

    在 Angular 5 中授权用户的最佳方式是什么

  4. 4

    使用React钩子更新动态状态的方式是什么?

  5. 5

    为什么以这种方式命名React钩子使用XXX?

  6. 6

    封装 React 应用程序的最佳方式是什么?

  7. 7

    我以错误的方式解决了Euler#15项目。为什么要这样做?

  8. 8

    我用错误的方式解决了Euler#15项目。为什么要这样做?

  9. 9

    Angular 2.如何应用orderBy?

  10. 10

    使用orderBy Angular后获取SORTED数组

  11. 11

    Angular 安装的更好方式

  12. 12

    Angular世界中React的“ $ emit”是什么

  13. 13

    如何以Rails的方式来做?

  14. 14

    为什么C#OrderBy这么快?

  15. 15

    Angular 2 RC5编写基于模板的表单的方式是什么?

  16. 16

    从Angular2到Electron并进行回传的最佳方式是什么?

  17. 17

    相同的数据在angular9中的显示方式不同。为什么?

  18. 18

    可实例化的Angular服务-我还可以通过其他什么方式重写它?

  19. 19

    使用Angular $ Resource,使用多个api调用创建服务的角度方式是什么?

  20. 20

    为什么以下Angular 1.6代码无法通过这种方式过滤为小写?

  21. 21

    仅在首次访问 Angular 时显示页面的最佳方式是什么?

  22. 22

    什么是设置粘性页眉 + 页脚 + 路由器出口高度的最佳方式:Angular 2 +

  23. 23

    React.js处理可见性=隐藏的方式是什么?

  24. 24

    在React组件之间使用自定义api客户端的惯用方式是什么?

  25. 25

    为什么无论状态是对象还是字符串,React都会以不同的方式重新渲染?

  26. 26

    为什么用 ES6 方式定义 React 组件构造函数不起作用?

  27. 27

    -React Native,状态数据从A.js传递到B.js的方式是什么

  28. 28

    react中定义方法的两种方式,有什么不同?

  29. 29

    在 React Native 项目中使用 java 库的方式是什么?

热门标签

归档