在React中将数组数据映射到Card Decks的好方法

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

如果您的问题是关于如何迭代您的数组，那么您可以使用react docs。

non-recursive使用箭头功能调用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>映射数据。