javascript - 映射具有两种不同样式的数组=奇数数组具有一种样式，偶数数组具有另一种样式

Question

这是 Gatsby 中博客文章的标准映射，它们显示所有博客文章以及标题、日期和帖子。

const { blogs } = data.strapi
const { id } = data.strapi.blogs
  return (
    <Layout>
      <article>
        <header>
          <h1> {blogs.title} </h1>
          <p> {blog.description} </p>
        </header>
        <hr />
      </article>
    </Layout>
  )
};

export default BlogPost;

但是我怎样才能改变第一篇博客文章中出现的外观，字体位于右侧，颜色为红色；左边第二篇博文的标题和颜色是蓝色等等？

我做了一个 if 条件，但我无法让它工作

let even=blogs.filter((a,i)=>i%2===1); // 1 3 5
let odd = blogs.filter((a,i)=>i%2===0); // 0 2 4

          <div>
            {even.map((blog, i) => {
              return <h1 className="text-danger">{blog.title}</h1>
              })}
          </div>

//输出:标题[0]，标题[2]，标题[4]；全红

//预期输出:title[0](红色)、title[1](蓝色)、title[2](红色)、title[3](蓝色) title[4](红色)、title[5 ](蓝色)；

Answer 1

假设您使用 CSS 来设计博客的样式，则只需有条件地添加类名称即可对每个元素进行样式设计，同时循环访问它们以打印它。

<div>
  {blogs.map((blog, i) => {
    return (
      <h1 className={`text-danger ${i % 2 === 1 ? "isEven" : "isOdd"}`}>
        {blog.title}
      </h1>
    );
  })}
</div>