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

Question

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

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;

但是如何更改第一个博客 post 中显示的外观，字体向右，颜色为红色；第二个博客 post 左边的标题和蓝色等等？

我做了一个 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 来设置您的博客的样式，您可以有条件地添加 class 名称来设置每个元素的样式，同时循环遍历它们以打印它。

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

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

Mapping an array with two different styles = odd array with one style and even array in other style

javascript

arrays

mapping

reactjs

gatsby