Блог

Я использую 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>
);
 

Я открыл проблему в репозитории 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.

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