Question

从JSON数据创建动态引导卡时遇到问题。我已经创建了一个动态表来做出反应，但是我不知道如何创建动态卡。

这是我拥有的JSON-

[
{
"albumId": 1,
"id": 1,
"title": "accusamus beatae ad facilis cum similique qui sunt",
"url": "https://via.placeholder.com/600/92c952",
"thumbnailUrl": "https://via.placeholder.com/150/92c952"
},
{
"albumId": 1,
"id": 2,
"title": "reprehenderit est deserunt velit ipsam",
"url": "https://via.placeholder.com/600/771796",
"thumbnailUrl": "https://via.placeholder.com/150/771796"
 },
 {
"albumId": 1,
"id": 3,
"title": "officia porro iure quia iusto qui ipsa ut modi",
"url": "https://via.placeholder.com/600/24f355",
"thumbnailUrl": "https://via.placeholder.com/150/24f355"
 },
 {
"albumId": 1,
"id": 4,
"title": "culpa odio esse rerum omnis laboriosam voluptate repudiandae",
"url": "https://via.placeholder.com/600/d32776",
"thumbnailUrl": "https://via.placeholder.com/150/d32776"
 },
 {
"albumId": 1,
"id": 5,
"title": "natus nisi omnis corporis facere molestiae rerum in",
"url": "https://via.placeholder.com/600/f66b97",
"thumbnailUrl": "https://via.placeholder.com/150/f66b97"
 },
 ]

Answer 1

我认为主要思想是拥有一个可以接受道具的卡片组件，并且在遍历json文件中获得的数组的同时，将这些道具传递给组件。

   { this.albums.map(album => <Card key={album.id} album={album} />) }

我想在reactJS中使用json数据创建动态引导卡

1 个答案: