Javascript 将阵列数据映射到卡片组的好方法

我有一个对象数组。我不知道如何创建多个卡组，每个卡组中有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>
  );
};

从'reactstrap'导入{Card，Button，…CardBlock}；
导出默认常量示例=（道具）=>{
返回(
{data.title}
{data.subtitle}/cardstitle>
{data.text}
按钮
...
...
... 
...
);
};

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

使用箭头函数调用with

map（）

的示例：

通过将组件保存在临时变量中：

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

编辑：

---

不要渲染多个

组件。相反，调整css，以便当有三个以上的行时，一个

将包装到下一行。然后，您只需映射数组中的数据一次，而不是每次都映射一次。

如果您的问题是如何在数组中迭代，则可以使用它

使用箭头函数调用with

map（）

的示例：

通过将组件保存在临时变量中：

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

编辑：

---

不要渲染多个

组件。相反，调整css，以便当有三个以上的行时，一个

将包装到下一行。然后，您只需映射数组中的数据一次，而不是每次都映射一次。

那么，代码中有什么不符合预期？你能问一个具体的问题吗？那么，在你的代码中，有什么地方没有达到预期的效果呢？你能问一个具体的问题吗？你建议我做items.map（…）items.map（…）items.map（…）？如果我的array.length是30 items=>那么我必须创建10个映射呢？我没有任何建议。你没有问任何问题，所以我猜你到底在挣扎什么。如果您的数据结构是一个数组，那么您应该调整您的css，这样第四张卡将浮动在下一行中，并且只在您的结构上迭代一次。你应该设计一个组件，这样它可以渲染任意数量的卡片，而不是固定的布局，总是6或9或任何数量。Well react是一个前端渲染框架，而不是网格系统。您可以使用flexbox、bootstrap或其他css框架之类的想法来简化工作，这样您就不必从头开始。然后您可以在react组件中使用它。如果您希望每行有3个框，则将每个框的宽度设为33%，并让框浮动。这样一来，它可以处理任意数量的选票。@Taras Yaremkiv你为什么要投反对票（如果你投的是哪一个）？Stackoverflow并不是为了完成您的工作并为您提供完全可以工作的代码段。我给了你需要的提示。既然你没有问任何问题，我不得不猜测，你到底在寻找什么。通常情况下，这个问题应该已经解决了。我认为否决这项议案是不公平的。你可以留下我的答案中到底缺少什么，我会尝试更新它。当你在路上遇到任何困难时，你总是可以问一个更精确的问题。对你来说也是一样——为什么你否决了我的问题（如果你就是那个问题的话）。顺便说一句，答案与我想要的相去甚远。在我看来，答案应该是这样的——除非创建多个地图，否则没有合理的方法来实现这一点，尽管它不能100%地解决问题。这是一个您可以使用的代码示例，但正如我所说，这是一个提示。您建议我执行items.map（…）items.map（…）items.map（…）items.map（…）？如果我的array.length是30 items=>那么我必须创建10个映射呢？我没有任何建议。你没有问任何问题，所以我猜你到底在挣扎什么。如果您的数据结构是一个数组，那么您应该调整您的css，这样第四张卡将浮动在下一行中，并且只在您的结构上迭代一次。你应该设计一个组件，这样它可以渲染任意数量的卡片，而不是固定的布局，总是6或9或任何数量。Well react是一个前端渲染框架，而不是网格系统。您可以使用flexbox、bootstrap或其他css框架之类的想法来简化工作，这样您就不必从头开始。然后您可以在react组件中使用它。如果您希望每行有3个框，则将每个框的宽度设为33%，并让框浮动。这样一来，它可以处理任意数量的选票。@Taras Yaremkiv你为什么要投反对票（如果你投的是哪一个）？Stackoverflow并不是为了完成您的工作并为您提供完全可以工作的代码段。我给了你需要的提示。既然你没有问任何问题，我不得不猜测，你到底在寻找什么。通常情况下，这个问题应该已经解决了。我认为否决这项议案是不公平的。你可以留下我的答案中到底缺少什么，我会尝试更新它。当你在路上遇到任何困难时，你总是可以问一个更精确的问题。对你来说也是一样——为什么你否决了我的问题（如果你就是那个问题的话）。顺便说一句，答案与我想要的相去甚远。在我看来，答案应该是这样的——除非创建多个地图，否则没有合理的方法来实现这一点，尽管它不能100%地解决问题。这是一个可以使用的代码示例，但正如我所说，这只是一个提示。