前端库-React框架：「45] 使用 Array.Filter() 动态过滤数组

路条编程 2021-09-18

848

React，由 Facebook 创建，是一个用于构建用户界面的开源 JavaScript 库。它用于创建组件、处理状态和道具、利用事件侦听器和某些生命周期方法在数据更改时更新数据。React 将 HTML 与 JavaScript 功能结合起来，创建自己的标记语言 JSX。本专题将向您介绍所有这些概念，以及如何实现它们和如何将其用于您自己的项目中。

使用 Array.Filter() 动态过滤数组

map 数组方法是一个强大的工具，在使用 React 时经常使用。与 map 相关的另一种方法是 filter，它根据条件过滤数组的内容，然后返回一个新数组。例如，如果我们有一个 users 数组，每个数组元素都有一个可以设置为 true 或 false 的 online 属性，我们可以只过滤那些在线的用户：

let onlineUsers = users.filter(user => user.online);

在下面代码中，MyComponent 的 state 由一个 users 数组初始化。有些用户在线，有些则不在线。过滤数组，以便我们只看到在线用户。为此，首先使用 filter 返回一个新数组，该数组只包含 online 属性为 true 的用户。然后，在 renderOnline 变量中，映射经过过滤的数组，并为每个用户返回一个包含它们 username 文本的 li 元素。确保像上篇文章一样包含一个独特的 key。

完整代码如下所示：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      users: [
        {
          username: '张佳一',
          online: true
        },
        {
          username: '马飞国',
          online: false
        },
        {
          username: '赵新新',
          online: true
        },
        {
          username: '吴明飞',
          online: false
        },
        {
          username: '刘国光',
          online: true
        },
        {
          username: '何洁',
          online: true
        }
      ]
    }
  }
  render() {
    const usersOnline = this.state.users.filter(user => user.online === true); 
    const renderOnline = usersOnline.map(user => <li key={user.username}>{user.username}</li>); 
    return (
       <div>
         <h1>当前在线用户:</h1>
         <ul>
           {renderOnline}
         </ul>
       </div>
    );
  }
};

今天就讲到这里，如果有问题需要咨询，大家可以直接留言或扫下方二维码关注公众号。也可以添加 happyzjp 微信受邀加入学习社群，我们会尽力为你解答。练习网站已经正式上线，大家可以登陆网站 http://www.icoderoad.com 进行文章中示例的练习。

前端

文章转载自路条编程，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

前端库-React框架：「45] 使用 Array.Filter() 动态过滤数组

评论