React将阵列数据映射到卡片台的好方法

Question

我有一个对象数组。我想不通我怎么在每一个创建多个的卡片与3张卡，如在图像上：

下面是一个例子：

import { Card, Button, ... CardBlock } from 'reactstrap'; 

export default const Example = (props) => { 
    return (<div> 
    <CardDeck> 
     <Card> 
     <CardImg top width="100%" src="https://..." /> 
     <CardBlock> 
      <CardTitle>{data.title}</CardTitle> 
      <CardSubtitle>{data.subtitle}/CardSubtitle> 
      <CardText>{data.text}</CardText> 
      <Button>Button</Button> 
     </CardBlock> 
     </Card> 
     <Card> 
     ... 
     </Card> 
     <Card> 
     ... 
     </Card> 
    </CardDeck> 

    <CardDeck> 
     ... 
    </CardDeck> 
     ... 
    </div> 
); 
}; 

Answer 1

如果你的问题是关于如何迭代你的数组，那么你可以使用Array.prototype.map()。

用箭头函数从react docs与map()呼叫的例子：

通过保存部件在临时变量：

function NumberList(props) { 
    const numbers = props.numbers; 
    const listItems = numbers.map((number) => 
    <ListItem key={number.toString()} 
       value={number} /> 
); 
    return (
    <ul> 
     {listItems} 
    </ul> 
); 
} 

通过使用map()直列：

function NumberList(props) { 
    const numbers = props.numbers; 
    return (
    <ul> 
     {numbers.map((number) => 
     <ListItem key={number.toString()} 
        value={number} /> 
    )} 
    </ul> 
); 
} 

编辑：

请勿渲染多个<CardDeck>组件。取而代之的是调整你的css，这样当有更多的三个时，<Card>会换行到下一行。然后，您只需将数据映射到阵列中一次，而不是再次对每个<CardDeck>进行映射。