Фильтровать или уменьшить сообщения в .Map - PullRequest
Новая
       33

Фильтровать или уменьшить сообщения в .Map

0 голосов
/ 29 апреля 2020

Так что я хочу, чтобы опция фильтровала избранные посты из постов в компоненте реакции. Специально для Гэтсби. js. Все это делается в одном компоненте вместо двух, чтобы уменьшить объем кода, который я пишу. Таким образом, компонент может отображать список сообщений в блоге или только избранные сообщения в зависимости от того, включена ли функция или нет.

Итак, у меня есть следующий код с идеей того, что я пытаюсь выполнить sh

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>
  )
}

Есть ли способ выполнить sh это в сообщениях && сообщений? раздел карты? Я знаю, что могу делать регулярные операторы if и else, но знаю, что мне не нужно писать один и тот же фрагмент кода дважды.

1 Ответ

2 голосов
/ 29 апреля 2020

вы можете использовать обычные операции javascript массива внутри jsx, в вашем случае вы можете отфильтровать массив по флагу featured, а затем отобразить результат: 

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

const App = () => {
  const [appPosts, setAppPosts] = React.useState(posts);

  const toggle = event => {
    setAppPosts(
      event.target.checked ? posts.filter(post => post.featuredpost) : posts
    );
  };

  return (
    <div>
      <label>
        <input type="checkbox" onChange={toggle} />
        Just Featured.
      </label>
      {appPosts.map(post => (
        <h2>{post.title}</h2>
      ))}
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />,rootElement);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>

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