如何在 JSX 中使用循环创建动态行？

Question

我正在使用react-bootstrap，我想复制这个结构：

<div class="row">
    <div class="col-lg-3"></div>
    <div class="col-lg-3"></div>
    <div class="col-lg-6"></div>
</div>
<div class="row">
    <div class="col-lg-6"></div>
    <div class="col-lg-3"></div>
    <div class="col-lg-3"></div>
</div>

我有一个必须在上面的列中显示的文章列表，如果您仔细观察，您会发现每一行都以不同的列开头，第一列以 3 开头，第二列以 6 开头，依此类推...

所以我写了：

<Container>
    {articles.map((art, i) =>
    (i + 1) % 3 === 0 ? (
        <Row>
        {" "}
        <></>
        <BlogItem index={i} colNum={3} art={art} />{" "}
        </Row>
    ) : (
        <></>
    )
    )}
</Container>

但这会产生不同的结构：

我做错了什么？

博客项目

const BlogItem = ({ index, colNum, art }) => {
  const intl = useIntl()

  return (
    <div
      className={(index + 1) % colNum === 0 ? "col-lg-6" : "col-lg-3"}
      key={index}
    >
      <Link to={`/blog/${art.slug}`}>
        <Card className="card-background">
          <div
            className="full-background"
            style={{
              backgroundImage: `url(${process.env.API_URL}${art.featured_image.url})`,
            }}
          ></div>
          <Card.Body>
            <div className="content-bottom">
              <div className="card-category">
                {Localization(art.category.name, intl.locale)}
              </div>
              <Card.Title>{Localization(art.name, intl.locale)}</Card.Title>
            </div>
          </Card.Body>
        </Card>
      </Link>
    </div>
  )
}

Answer 1

您需要为您的 BlogItems 做另一个循环。对于每一行，您需要 3 个 BlogItem。外部映射负责行，内部映射负责 BlogItems。

要获取列宽的交替类名，您可以传递一个新的道具，告诉 BlogItem 它所在的行是否在偶数位置。

<Container>
    {articles.map((art, i) =>
    (i + 1) % 3 === 0 ? (
        <Row>
        {" "}
        <></>
        {Array(3).fill().map((el, index) => {
           return <BlogItem index={index} even={i % 2 === 0} colNum={3} art={art} />
        })}
        {" "}
        </Row>
    ) : (
        <></>
    )
    )}
</Container>

const BlogItem = ({ index, colNum, art, even }) => {
  const intl = useIntl();
  let wrapperClass;
  if (even && index === 0 || !even && index === 2) {
    wrapperClass = "col-lg-6";
  } else {
    wrapperClass = "col-lg-3";
  }

  return (
    <div
      className={wrapperClass}
      key={index}
    >
      <Link to={`/blog/${art.slug}`}>
        <Card className="card-background">
          <div
            className="full-background"
            style={{
              backgroundImage: `url(${process.env.API_URL}${art.featured_image.url})`,
            }}
          ></div>
          <Card.Body>
            <div className="content-bottom">
              <div className="card-category">
                {Localization(art.category.name, intl.locale)}
              </div>
              <Card.Title>{Localization(art.name, intl.locale)}</Card.Title>
            </div>
          </Card.Body>
        </Card>
      </Link>
    </div>
  )
}