Question

我正在使用语义UI的Card.Group组件来显示一堆卡片。数据来自外部JSON，经过格式化并向下传递到小组的items属性。

我想将道具传递给组中的卡片（即将它们设为raised或设置size="mini"），该怎么办？还是我必须在项目JSON上使用.map()，并指定带有道具的Card组件？

更新：代码（在此处有用）：

import React from 'react';
import {Card, Container} from 'semantic-ui-react';

//assume this JSON comes from an API
const items = [
  {
    "header": "header1",
    "meta": "meta1",
    "description": "description1",
    "image": "image1.png"
  },
  {
    "header": "header2",
    "meta": "meta2",
    "description": "description2",
    "image": "image2.png"
  }
];

export default () => (
  <Container>
     <Card.Group stackable items={items} />
  </Container>
);

Answer 1

我在React Semantic UI Github存储库上打开了一个问题，并得到了以下答案：

这是速记的一般行为，适用于所有组件因此，可以，您可以使用.map（）并指定匹配的道具。

const items = [
  {
    header: 'Project Report - June', // these props are passed to Card
    meta: 'ROI: 27%', 
    color: 'red',
    raised: true,
  },
  {
    header: { content: 'Project Report - June', textAlign: 'right' }, // these to Card.Header in Card
  },
]

我希望这对需要在Prose Semantic UI中将prop传递给子组件的人有所帮助。

Answer 2

很难看到没有任何代码，但是通常，对于JSON对象，您将不得不使用.map()来解析数组。

如何将道具传递到React Semantic UI Card.Group中的卡片？

2 个答案: