Question

我正在尝试使用react-bootstrap在ReactJS中创建一个交互式用户界面。我正在使用卡和卡组。我需要一种自动将卡片排列在新行中的方法。类似于每行三张卡片，如果我有三张以上，则为第四张卡片创建新行。


    import React, { Component } from 'react';
    import {Card,CardGroup} from 'react-bootstrap';
    import {Button} from 'react-bootstrap';
    const Items = ({items}) => {
      return (
    <>
    <container>
    <row>
    <CardGroup>
        {items.map((item) => (
          <Card style={{ width: '18rem' }}>

      <Card.Body>
        <Card.Title>{item.NOME}</Card.Title>
        <Card.Subtitle className="mb-2 text-muted">{item.CATEGORIA}</Card.Subtitle>
        <Card.Text>
        {item.DESCRICAO}
        </Card.Text>
        <Card.Link href="#">Card Link</Card.Link>
        <Card.Link href="#">Another Link</Card.Link>
      </Card.Body>
    </Card>
          ))}
        </CardGroup>
        </row>
        </container>
    </>
        )
    };

    export default Items

Answer 1

您可以创建一个由3张卡片组成的阵列，然后对其进行迭代：

const arr = var x = arr.reduce((item, key, index) => (index % 3 == 0 ? item.push([key]) : item[item.length-1].push(key)) && item, []);

const Items = ({items}) => (
  <>
    <container>
      {arr.map(group => (
        <row>
          <CardGroup>
            {group.map(card => (
              <Card style={{ width: '18rem' }}>
                <Card.Body>
                  <Card.Title>{item.NOME}</Card.Title>
                  <Card.Subtitle className="mb-2 text-muted">{item.CATEGORIA}</Card.Subtitle>
                  <Card.Text>{item.DESCRICAO}</Card.Text>
                  <Card.Link href="#">Card Link</Card.Link>
                  <Card.Link href="#">Another Link</Card.Link>
                </Card.Body>
              </Card>
            ))}
          </CardGroup>
        </row>
      ))}
    </container>
  </>
);

我尚未测试此代码，但它应该可以工作...

如何自动在行和列中排列卡片？

1 个答案: