如何将 props 传递给 React Semantic UI Card.Group 中的卡片？

Question

我正在使用 Semantic UI 的

Card.Group

组件来显示一堆卡片。数据来自外部 JSON，经过格式化并传递到组的

items

属性。

我想将道具传递给组中的卡片（即使它们

raised

或设置

size="mini"

），我该怎么做？或者我是否必须在项目 JSON 上使用

.map()

，并使用 props 指定

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
  },
]

Answer 2

如果没有看到任何代码，很难说，但通常，对于 JSON 对象，您必须使用

.map()

来解析数组。