Question

在AngularJS中，您可以使用＆＃34; filter＆＃34;缩小ng-repeat的结果，如下所示：

<div ng-repeat="item in items | filter: x">

目前我正在使用Array.map（）在ReactJS中渲染数组中的多个项目，并且想知道如何复制Angular的ng-repeat过滤器在ReactJS中具有的功能。

这是我目前用于呈现一些博客文章的方法：

renderBlogs() {
      return this.props.blogs.map((blog) => {
        return (
          <div key={blog.id}>
            <Link to={`blogs/${blog.id}`}>
              <img src={blog.image_url} />
              <h1>Author</h1>
              <p>{blog.author}</p>
              <h1>Title</h1>
              <p>{blog.topic}</p>
            </Link>
          </div>
        )
      })
    }

我希望只有一个输入字段可以在输入字段更改时过滤迭代结果。是否有任何NPM模块可以帮助解决这个问题或解决这个问题的典型方法？

由于

Answer 1

与Angular不同，React没有自己的原语来做这样的事情，而不是重新发明轮子，它只依赖于JS。

在JavaScript中，您可以通过调用filter并提供一个函数来filter数组，该函数将获取每个项目并告知是否包含它：

[1, -2, 3, -4, 5, -6].filter(x => x > 0) // [1, 3, 5]

过滤器和地图也可以合并：

[1, -2, 3, -4, 5, -6].filter(x => x > 0).map(x => x * 2) // [2, 6, 10]

即使你从地图返回一个React组件，它也不会改变，它仍然是JS过滤器+地图：

return this.props.blogs.filter(blog => {
  return true; // place your actual check here
}).map((blog) => {
  return (
    <div key={blog.id}>
      <Link to={`blogs/${blog.id}`}>
        <img src={blog.image_url} />
        <h1>Author</h1>
        <p>{blog.author}</p>
        <h1>Title</h1>
        <p>{blog.topic}</p>
      </Link>
    </div>
  )
})

Answer 2

使用React解决方案需要更多Javascript，但不要让它成为一种威慑。

有很多方法可以实现您的目标，但我认为您应该使用onChange钩子将文本输入连接到组件的状态或应用程序的状态：

<input onChange={changeHandler} .. />

实施changeHandler(..)，使其调用setState(..)来更新存储输入文本的模型。这将重新呈现您的组件和子组件，最终调用您的renderBlogs(..)函数。

您需要设计一个谓词函数，该函数根据某些条件确定是显示还是隐藏博客帖子。我会将其抽象为辅助函数，但实现细节完全取决于您。您可能应该根据模型中的文本和标记中文本元素的innerHTML的某些组合作为基础。

然后我会重构renderBlogs(..)的return语句，在返回一个Blog组件之前调用这个谓词。

renderBlogs() {
  return this.props.blogs.map((blog) => {
    return this.predicateFn(blog)
      ? this.renderBlog(blog)
      : null
  }).filter(Boolean);
}

我还建议将博客帖子的标记抽象到自己的组件中，或者作为此组件的方法... ... renderBlog(..)。

祝你好运！

在ReactJS中有一种方法来过滤正在迭代的渲染结果吗？

2 个答案: