在盖茨比项目中使用Javascript有条件地显示过滤后的帖子或正常帖子

我想让我的PostList组件保持通用性。如果为一篇文章设置了

featured

，我想呈现特色文章，否则将呈现文章（没有

featured

）

我从api中查询一个布尔字段

特征

。我的通用PostList组件：

const PostList = ({ posts }: Props) => {

  return (
    <div>
      {posts
        .filter(({ featured }) => {
          return featured;
        })
        .map(({ id, name, slug }) => (
          <PostTeaser key={id} title={name} url={slug} />
        ))}
    </div>
  );
};

export default PostList;

const PostTeaser = ({ title, url }: Props) => {

  return (
    <Link to={url}>
      <div>
        <h1>{title}</h1>
      </div>
    </Link>
  );
};

export default PostTeaser;

---

我不想再次复制所有代码并执行类似于

return的操作！精选

。有没有一种方法可以将这两者结合起来？

您可以通过使用

some

来检查

posts

中是否至少有一篇文章的

特性与true相同。如果有，过滤掉帖子，只显示特色帖子。如果没有，则显示所有帖子

const PostList = ({ posts }: Props) => {

  const hasFeaturedPost = posts.some(post => post.featured);

  let updatedPosts;

  if (hasFeaturedPosts) {
    updatedPosts = posts.filter(post => post.featured);
  } else {
    updatedPosts = posts;
  }

  return (
    <div>
      {updatedPosts
        .map(({ id, name, slug }) => (
          <PostTeaser key={id} title={name} url={slug} />
        ))}
    </div>
  );
};

export default PostList;

constpostlist=（{posts}:Props）=>{
const hasFeaturedPost=posts.some（post=>post.featured）；
让我们更新帖子；
如果（具有功能性立柱）{
updatedPosts=posts.filter（post=>post.featured）；
}否则{
更新的帖子=帖子；
}
返回(
{更新的帖子
.map（{id，name，slug}）=>(
))}
);
};
导出默认的PostList；
你能给我举一个帖子的例子吗？另外，
projects
应该
posts
在代码片段中吗？我想我现在明白了。查看我的最新答案，并让我知道这是否有意义