Как передать реквизит на карточки в React Semantic UI Card.Group?

Question

Я использую компонент Card.Group в Semantic UI для отображения нескольких карт. Данные поступают из внешнего JSON, форматируются и передаются в items prop группы.

Я хотел бы передать реквизиты картам в группе (т.е. сделать их raised или установить size="mini"), как я могу это сделать? Или я должен использовать .map() для элементов JSON и указать 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
  },
]

Надеюсь, это поможет всем, кому нужно передать реквизиты дочерним компонентам в React Semantic UI.

Answer 2

Трудно сказать, не видя никакого кода, но обычно с объектами JSON вам придется использовать .map() для разбора массива.