过滤或减少.Map中的帖子

过滤或减少.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>
  )
}

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

回答如下：

您可以在jsx中使用常规的javascript数组操作，在这种情况下，您可以通过featured标志过滤数组，然后显示结果：

const posts = [
  {
    featuredpost: true,
    title: "Featured Post"
  },
  {
    title: "Normal Post"
  },
  {
    featuredpost: true,
    title: "Featured Post 2"
  },
  {
    title: "Normal Post 2"
  }
];

const App = () => {
  return (
    <div>
      {posts
        .filter(post => post.featuredpost)
        .map(post => (
          <h2>{post.title}</h2>
        ))}
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

<script src="https://cdnjs.cloudflare/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

过滤或减少.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>
  )
}

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

回答如下：

您可以在jsx中使用常规的javascript数组操作，在这种情况下，您可以通过featured标志过滤数组，然后显示结果：

const posts = [
  {
    featuredpost: true,
    title: "Featured Post"
  },
  {
    title: "Normal Post"
  },
  {
    featuredpost: true,
    title: "Featured Post 2"
  },
  {
    title: "Normal Post 2"
  }
];

const App = () => {
  return (
    <div>
      {posts
        .filter(post => post.featuredpost)
        .map(post => (
          <h2>{post.title}</h2>
        ))}
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

<script src="https://cdnjs.cloudflare/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>