Javascript 过滤或减少.Map中的帖子

所以我想让选项从react组件中的帖子中筛选出一篇特色帖子。专为Gatsby.js设计。所有这些都是在一个组件而不是两个组件中完成的，以减少我编写的代码量。通过这种方式，该组件可以显示博客帖子列表，或者根据“特色”是打开还是关闭来显示特色帖子

因此，我有以下代码，其中包含我试图实现的目标

const BlogRoll = ({ data, featured }) => {
  const { edges: posts } = data
  return (
    <div>
      {posts && 
        posts.map(({ node: post }) => (
          <div>
            if featured than posts.filter(post.featuredpost) or post.title (listing all of the posts instead)
          </div>
        ))
      }
    </div>
  )
}

constblogroll=（{data，featured}）=>{
const{edges:posts}=数据
返回(
{职位&&
posts.map（（{node:post}）=>(
如果比posts.filter（post.featuredpost）或post.title（列出所有帖子）更具特色
))
}
)
}

---

有没有办法在posts&&posts.map部分实现这一点？我知道我可以做一个常规的if和else语句，但我知道我不必两次编写相同的代码段

您可以在jsx中使用普通javascript数组操作，在您的情况下，您可以通过

特征

标志过滤数组，然后显示结果：

const posts=[
{
featuredpost：对，
标题：“特色帖子”
},
{
标题：“正常职务”
},
{
featuredpost：对，
标题：“特色帖子2”
},
{
标题：“普通职位2”
}
];
常量应用=（）=>{
const[appPosts，setAppPosts]=React.useState（posts）；
常量切换=事件=>{
setAppPosts(
event.target.checked？posts.filter（post=>post.featuredpost）：posts
);
};
返回(
只是特写。
{appPosts.map（post=>(
{post.title}
))}
);
};
const rootElement=document.getElementById（“根”）；
render（，rootElement）
您可以在jsx中使用普通javascript数组操作，在您的情况下，您可以通过
特色
标志过滤数组，然后显示结果：


const posts=[
{
featuredpost：对，
标题：“特色帖子”
},
{
标题：“正常职务”
},
{
featuredpost：对，
标题：“特色帖子2”
},
{
标题：“普通职位2”
}
];
常量应用=（）=>{
const[appPosts，setAppPosts]=React.useState（posts）；
常量切换=事件=>{
setAppPosts(
event.target.checked？posts.filter（post=>post.featuredpost）：posts
);
};
返回(
只是特写。
{appPosts.map（post=>(
{post.title}
))}
);
};
const rootElement=document.getElementById（“根”）；
render（，rootElement）

抱歉，我更新了我的问题，说我想选择过滤特色帖子。这样组件就可以显示特色帖子或所有帖子。不用担心，我更新了上面的代码片段，还添加了一些状态。你应该尽量减少模板中的逻辑，尽量将逻辑保留在组件方法中。抱歉，我更新了我的问题，说我想选择过滤特色帖子。这样组件就可以显示特色帖子或所有帖子。不用担心，我更新了上面的代码片段，还添加了一些状态。你应该尽量减少模板中的逻辑，尽量将逻辑保留在组件方法中。