Question

使用数组的map方法，我正在创建卡片组件，以迭代容器中的状态。我想将卡片垂直排列，每行仅3张卡片。

这是ContentCard功能组件：

import React from 'react';
import CardLogo from './../../../Assets/CardLogo.PNG';
import {
    Card, CardImg, CardText, CardBody,
    CardTitle, CardSubtitle, Button
} from 'reactstrap';
import classes from './ContentCard.module.css';

const contentCard = (props) => (

        <Card className={classes.ContentCard}>
            <CardImg src={CardLogo}/>
            <CardBody>
                <CardTitle><b>{props.title}</b></CardTitle>
                <CardSubtitle>from ₹{props.price}</CardSubtitle>
                <CardText>Typically 450-400 words, an e-book is perfect for your target audience ranging from prospective customers to users</CardText>
                <Button>Order</Button>
            </CardBody>
        </Card>
)
export default contentCard;

这是ContentCards父组件，可重复使用ContentCard组件。如上所述，在迭代此组件中的状态以排列它们之后，我应该如何设置它们的样式。

import React, {Component} from 'react';
import classes from './ContentCards.module.css';
import ContentCard from './ContentCard/ContentCard';

class ContentCards extends Component{
    state ={
        content: [
        {title : 'Blog / Article', price: '500'},
        {title : 'Newsletter / Emailer', price: '1000'},
        {title : 'Whitepaper', price:'2000'},
        {title : 'e-book', price: '1000'},
        {title : 'Report-Guide', price: '1000'},
        {title : 'Product Description', price: '500'},
        {title : 'Website Content', price: '1000'},
        {title : 'Video Script', price: '1000'},
        {title : 'Company Profile / Brochure', price: '2000'}, 
        {title : 'Press Realise', price: '2000'}
    ]
}

    render(){
        let card = this.state.content.map(cnt => (
            <ContentCard
                key={cnt.title}
                title={cnt.title}
                price={cnt.price}
            />
        ));

        return(
            <div className={classes.ContentCards}>
                {card}
            </div> 
        )
    }
}

export default ContentCards;

Answer 1

您可以为此使用reactstrap的Col和Row组件：

由于引导程序使用12列系统，因此要在一行中显示3列，我将sm设置为4。

我制作了这个沙盒，它以完整的页面尺寸连续显示3张卡片。

https://codesandbox.io/s/bold-heisenberg-o9s2k

由于我没有课程和徽标，因此我将其排除在外。

Answer 2

使用row类作为容器，然后为每个孩子分配col-4类

<div className={`${classes.ContentCards} row`}>
    {
    this.state.content.map(cnt => (
            <ContentCard
                className="col-sm-4"
                key={cnt.title}
                title={cnt.title}
                price={cnt.price}
            />
        ));
    }
</div>

Answer 3

做包装：

.wrapper{ 
    display:flex;
    flex-wrap:wrap;
}

然后将子级设置为

.child{
    flex-shrink:0;
    flex-basis of calc(100%/3);
}

此处的沙盒：https://codesandbox.io/s/eager-mendel-s4dog

我应该如何设计卡片的样式，以便每行可以有3张卡片？

3 个答案: