如果我有超过三张卡片，我如何在 reactstrap 或 bootstrap 中为第四张卡片创建一个新行？

Question

我是 javascript 的新手并做出反应。我需要一种方法来自动将卡片排列成新的行。每行三张卡片，如果超过三张，则为第四张卡片创建一个新行。我找到了答案，但我无法将这种方式转换为我的项目。我是自学成才，第一次做项目实践。

我的代码：

{
  this.props.products.map((product) => (
    <Row>
      <CardGroup>
        <Card>
          <CardImg
            top
            width="100%"
            src={`${process.env.PUBLIC_URL}/assets/images/1.jpg`}
            alt="Card image cap"
          />
          <CardBody>
            <CardTitle tag="h5">{product.productName}</CardTitle>
            <CardSubtitle tag="h6" className="mb-4 text-muted">
              author
            </CardSubtitle>
            <CardText>casdadasdx</CardText>
          </CardBody>
        </Card>
      </CardGroup>
    </Row>
  ));
}

答案：您可以创建一个包含 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>
  </>
);

Answer 1

这是你需要的吗？

import "./styles.css";
import { Row, Col, Card, CardHeader, CardBody } from "reactstrap";

export default function App() {
  return (
    <div className="App">
      <Row>
        {Array.from(Array(7)).map((item, index) => {
          return (
            <Col md={4} lg={4} sm={4} xs={12} key={index}>
              <Card>
                <CardHeader>Header {index + 1}</CardHeader>

                <CardBody>Body {index + 1}</CardBody>
              </Card>
            </Col>
          );
        })}
      </Row>
    </div>
  );
}

这是完整的工作示例https://codesandbox.io/s/romantic-thunder-drchc?file=/src/App.tsx

如果我有超过三张卡片，我如何在 reactstrap 或 bootstrap 中为第四张卡片创建一个新行？

if I have more than three cards, how can i create a new row for the 4th card in reactstrap or bootstrap?

javascript

reactjs

reactstrap

card