时间戳

首页 > 解决方案 > 如何在我的 React 组件中打印出行和列

javascript - 如何在我的 React 组件中打印出行和列

问题描述

我将 React 与 React Boostrap 一起使用，我试图弄清楚如何将三张卡片放在三列上，并在每次达到三张卡片时添加一个新行。我似乎无法理解如何打印出新的 Row 标签。据我了解，我无法以一种好的方式将条件包裹在 and 标签周围。我怎么能接近这个？

                 {items &&
                    items.map((item, index) =>
                    <Row>
                        <Col>
                            <Card style={{ width: '18rem' }}>
                            <Card.Img variant="top" src={item.logo}/>
                            <Card.Body>
                                <Card.Title>Card Title</Card.Title>
                                <Card.Text>
                                Some quick example text to build on the card title and make up the bulk of
                                the card's content.
                                </Card.Text>
                                <Button variant="primary">Go somewhere</Button>
                            </Card.Body>
                            </Card>
                        </Col>
                    </Row>
                    )
                    }

标签： javascriptreactjs

解决方案

display: 'grid'使用and可以更快、更干净地完成它 gridTemplateColumns:'1fr 1fr 1fr'。

你必须将父级设置display为grid并grid-template-columns设置为1fr 1fr 1fr你将有一个表，每个表都有父级的 1 部分。

您的代码将如下所示：

<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr' }} >
    {items && items.map((item, index) =>
        <Card style={{ width: '18rem' }}>
            <Card.Img variant="top" src={item.logo} />
            <Card.Body>
                <Card.Title>Card Title</Card.Title>
                <Card.Text>
                    Some quick example text to build on the card title and make up the bulk of
                    the card's content.
                                    </Card.Text>
                <Button variant="primary">Go somewhere</Button>
            </Card.Body>
        </Card>
    )}
</div>

更多关于网格的信息在这里！

推荐阅读