Блог

У меня есть компонент React, который возвращает массив объектов, представляющих различные группы элементов (например, персонажи Marvel, персонажи DC, Волшебные карты, комиксы), и отображает их либо в виде списка текстовых элементов, либо в виде сетки фотографий.

Я также возвращаю массив конфигурации объектов, в котором перечислена каждая группа и каким должен быть ее стиль визуализации.

Я изо всех сил пытаюсь понять, как я могу использовать этот объект конфигурации в качестве словаря для определения стиля визуализации элементов.

Моей первой мыслью было передать элементы группы вот так groupsArray[configObject] , а затем использовать возвращаемые значения в таком переключателе:

 switch(group.groupName){
   case "Marvel Characters":
   case "DC Characters":
       return grids.push(<GridView group={group} />);
   case "Magic Cards":
   case "Kaiju and Mechs":
       return lists.push(<ListView group={group} />);
   default: 
       return lists.push(<ListView group={group} />);
}
 

Но я не уверен, что это сработает. Codesandbox для справки

На данный момент мое заявление о переключении жестко закодировано следующим образом:

 function renderList(groupsArray) {
  const grids = [];
  const lists = [];

  if (!groups) return null;

  groupsArray.map((group) => {
    switch (group.groupName) {
      case "Marvel Characters":
        return grids.push(<GridView group={group} />);
      case "Magic Cards":
        return lists.push(<ListView group={group} />);
      case "DC Characters":
        return grids.push(<GridView group={group} />);
      default:
        return null;
    }
  });

  const resources = grids.concat(lists);

  return resources;
}
 

Это объект конфигурации:

 const itemGrouping = 
[
    {
      "groupName": "Marvel Characters",
      "groupType": "grid"
    },
    {
      "groupName": "DC Characters",
      "groupType": "grid"
    },
    {
      "groupName": "Magic Cards",
      "groupType": "list"
    },
    {
      "groupName": "Kaiju and Mechs",
      "groupType": "list"
    }
]
 

И это структура groupsArray:

 groupsArray = [
  {
    groupName: "Marvel Characters",
    items: [{}, {}, {}]
  },
  {
    groupName: "DC Characters",
    items: [{}, {}, {}]
  }
]
 

Было бы это тем, что вы ищете?

 function renderList(groupsArray) {
  const grids = [];
  const lists = [];

 
  if (!groups) return null;

  groupsArray.map((group) => {
     // we first determine which group it belongs.
     const grouping = itemGrouping.find( item => item.groupName === group.groupName);

      //then we render depending on the groupType
     if (grouping.groupType === 'grid') {
         grids.push(<GridView group={group} />)
     } else { 
         lists.push(<ListView group={group} />)
     }
    
  });

  const resources = grids.concat(lists);

  return resources;
}