地块测绘(反应)

Question

我在目录上有一份商品清单。ListItem中的每一项都应该有下拉SubList。

我正在和reactjs (初学者)合作，所以我还不知道有什么办法可以让它变得漂亮。

问题：如何才能获得大量的列表和数据？

我绝对可以用纯html和css达到我的目标。但是在将来，支持这样的代码就不太好了。

所以我试着用map()来做这件事，但很可能还是找不到一个愚蠢的错误。

所以我的目录清单看起来像就是那个

以及我的代码(例如，对于一个表)：

 const CatalogueListNames = [
       {
    catalogueNameType: 'appliance',
    catalogueName: 'Бытовая техника',
    ListItem: [
        {
            itemName: 'Крупногабаритная техника',
            itemPath: '/bulky_machines',
            SubList: [
                {
                    subItemPath: '/fridges',
                    subItemName: 'Холодильники',

                    subItemPath1: '/freezers',
                    subItemName1: 'Морозильники',

                    subItemPath2: '/washmachines',
                    subItemName2: 'Стиральные машины',

                    subItemPath3: '/driers',
                    subItemName3: 'Сушильные машины',

                    subItemPath4: '/stovehoods',
                    subItemName4: 'Вытяжки',

                    subItemPath5: '/cookers',
                    subItemName5: 'Кухонные плиты',

                    subItemPath6: '/dishwashers',
                    subItemName6: 'Посудомоечные машины',

                    subItemPath7: '/wineracks',
                    subItemName7: 'Винные шкафы',
                },
            ],
        },
        {
            itemName: 'Встраиваемая техника',
            itemPath: '/built_in_appliances',
            SubList: [
                {
                    subItemPath: '/fridges',
                    subItemName: 'Холодильники',

                    subItemPath1: '/freezers',
                    subItemName1: 'Морозильники',

                    subItemPath2: '/washmachines',
                    subItemName2: 'Стиральные машины',

                    subItemPath3: '/driers',
                    subItemName3: 'Сушильные машины',

                    subItemPath4: '/stovehoods',
                    subItemName4: 'Вытяжки',

                    subItemPath5: '/cookers',
                    subItemName5: 'Кухонные плиты',

                    subItemPath6: '/dishwashers',
                    subItemName6: 'Посудомоечные машины',

                    subItemPath7: '/wineracks',
                    subItemName7: 'Винные шкафы',
                },
            ],
        },
        {
            itemName: 'Уборка, уход за одеждой',
            itemPath: '/cleaning',
            SubList: [
                {
                    subItemPath: '/fridges',
                    subItemName: 'Холодильники',

                    subItemPath1: '/freezers',
                    subItemName1: 'Морозильники',

                    subItemPath2: '/washmachines',
                    subItemName2: 'Стиральные машины',

                    subItemPath3: '/driers',
                    subItemName3: 'Сушильные машины',

                    subItemPath4: '/stovehoods',
                    subItemName4: 'Вытяжки',

                    subItemPath5: '/cookers',
                    subItemName5: 'Кухонные плиты',

                    subItemPath6: '/dishwashers',
                    subItemName6: 'Посудомоечные машины',

                    subItemPath7: '/wineracks',
                    subItemName7: 'Винные шкафы',
                },
            ],
        },
        {
            itemName: 'Климатическая техника',
            itemPath: '/climate',
            SubList: [
                {
                    subItemPath: '/fridges',
                    subItemName: 'Холодильники',

                    subItemPath1: '/freezers',
                    subItemName1: 'Морозильники',

                    subItemPath2: '/washmachines',
                    subItemName2: 'Стиральные машины',

                    subItemPath3: '/driers',
                    subItemName3: 'Сушильные машины',

                    subItemPath4: '/stovehoods',
                    subItemName4: 'Вытяжки',

                    subItemPath5: '/cookers',
                    subItemName5: 'Кухонные плиты',

                    subItemPath6: '/dishwashers',
                    subItemName6: 'Посудомоечные машины',

                    subItemPath7: '/wineracks',
                    subItemName7: 'Винные шкафы',
                },
            ],
        },
        {
            itemName: 'Приготовление пищи',
            itemPath: '/cooking',
            SubList: [
                {
                    subItemPath: '/fridges',
                    subItemName: 'Холодильники',

                    subItemPath1: '/freezers',
                    subItemName1: 'Морозильники',

                    subItemPath2: '/washmachines',
                    subItemName2: 'Стиральные машины',

                    subItemPath3: '/driers',
                    subItemName3: 'Сушильные машины',

                    subItemPath4: '/stovehoods',
                    subItemName4: 'Вытяжки',

                    subItemPath5: '/cookers',
                    subItemName5: 'Кухонные плиты',

                    subItemPath6: '/dishwashers',
                    subItemName6: 'Посудомоечные машины',

                    subItemPath7: '/wineracks',
                    subItemName7: 'Винные шкафы',
                },
            ],
        },
        {
            itemName: 'Приготовление кофе и чая',
            itemPath: '/tea_and_coffee',
            SubList: [
                {
                    subItemPath: '/fridges',
                    subItemName: 'Холодильники',

                    subItemPath1: '/freezers',
                    subItemName1: 'Морозильники',

                    subItemPath2: '/washmachines',
                    subItemName2: 'Стиральные машины',

                    subItemPath3: '/driers',
                    subItemName3: 'Сушильные машины',

                    subItemPath4: '/stovehoods',
                    subItemName4: 'Вытяжки',

                    subItemPath5: '/cookers',
                    subItemName5: 'Кухонные плиты',

                    subItemPath6: '/dishwashers',
                    subItemName6: 'Посудомоечные машины',

                    subItemPath7: '/wineracks',
                    subItemName7: 'Винные шкафы',
                },
            ],
        },
        {
            itemName: 'Подготовка и обработка продуктов',
            itemPath: '/food_processing',
            SubList: [
                {
                    subItemPath: '/fridges',
                    subItemName: 'Холодильники',

                    subItemPath1: '/freezers',
                    subItemName1: 'Морозильники',

                    subItemPath2: '/washmachines',
                    subItemName2: 'Стиральные машины',

                    subItemPath3: '/driers',
                    subItemName3: 'Сушильные машины',

                    subItemPath4: '/stovehoods',
                    subItemName4: 'Вытяжки',

                    subItemPath5: '/cookers',
                    subItemName5: 'Кухонные плиты',

                    subItemPath6: '/dishwashers',
                    subItemName6: 'Посудомоечные машины',

                    subItemPath7: '/wineracks',
                    subItemName7: 'Винные шкафы',
                },
            ],
        },
        {
            itemName: 'Уход за волосами и телом',
            itemPath: '/hygienics',
            SubList: [
                {
                    subItemPath: '/fridges',
                    subItemName: 'Холодильники',

                    subItemPath1: '/freezers',
                    subItemName1: 'Морозильники',

                    subItemPath2: '/washmachines',
                    subItemName2: 'Стиральные машины',

                    subItemPath3: '/driers',
                    subItemName3: 'Сушильные машины',

                    subItemPath4: '/stovehoods',
                    subItemName4: 'Вытяжки',

                    subItemPath5: '/cookers',
                    subItemName5: 'Кухонные плиты',

                    subItemPath6: '/dishwashers',
                    subItemName6: 'Посудомоечные машины',

                    subItemPath7: '/wineracks',
                    subItemName7: 'Винные шкафы',
                },
            ],
        },
        {
            itemName: 'Техника для здоровья',
            itemPath: '/health',
            SubList: [
                {
                    subItemPath: '/fridges',
                    subItemName: 'Холодильники',

                    subItemPath1: '/freezers',
                    subItemName1: 'Морозильники',

                    subItemPath2: '/washmachines',
                    subItemName2: 'Стиральные машины',

                    subItemPath3: '/driers',
                    subItemName3: 'Сушильные машины',

                    subItemPath4: '/stovehoods',
                    subItemName4: 'Вытяжки',

                    subItemPath5: '/cookers',
                    subItemName5: 'Кухонные плиты',

                    subItemPath6: '/dishwashers',
                    subItemName6: 'Посудомоечные машины',

                    subItemPath7: '/wineracks',
                    subItemName7: 'Винные шкафы',
                },
            ],
        },
        {
            itemName: 'Сопутствующие товары и аксессуары',
            itemPath: '/accessories',
            SubList: [
                {
                    subItemPath: '/fridges',
                    subItemName: 'Холодильники',

                    subItemPath1: '/freezers',
                    subItemName1: 'Морозильники',

                    subItemPath2: '/washmachines',
                    subItemName2: 'Стиральные машины',

                    subItemPath3: '/driers',
                    subItemName3: 'Сушильные машины',

                    subItemPath4: '/stovehoods',
                    subItemName4: 'Вытяжки',

                    subItemPath5: '/cookers',
                    subItemName5: 'Кухонные плиты',

                    subItemPath6: '/dishwashers',
                    subItemName6: 'Посудомоечные машины',

                    subItemPath7: '/wineracks',
                    subItemName7: 'Винные шкафы',
                },
            ],
        },
    ],
},
];

还有这里

const Catalogue = () => {
  return (
    <div className={"CatalogueFull"}>
      {CatalogueListNames.map((itemData, index) => {
        return (
          <div className={"CatalogueItem"}>
            <CatalogueName
              key={`${itemData.catalogueNameType}` + { index }}
              type={itemData.catalogueNameType}
            >
              {itemData.catalogueName}
            </CatalogueName>
            {itemData.ListItem.map((ListItem, index) => {
              return (
                <ul>
                  <li>
                    <CatalogueItemsList
                      key={index}
                      itemName={ListItem.itemName}
                      itemPath={ListItem.itemPath}
                    />
                    {ListItem.Sublist.map((SubList, index) => {
                      return (
                        <CatalogueItemsListSubList
                          key={index}
                          subItemPath={SubList.subItemPath}
                          subItemName={SubList.subItemName}
                          subItemPath1={SubList.subItemPath1}
                          subItemName1={SubList.subItemName1}
                          subItemPath2={SubList.subItemPath2}
                          subItemName2={SubList.subItemName2}
                          subItemPath3={SubList.subItemPath3}
                          subItemName3={SubList.subItemName3}
                          subItemPath4={SubList.subItemPath4}
                          subItemName4={SubList.subItemName4}
                          subItemPath5={SubList.subItemPath5}
                          subItemName5={SubList.subItemName5}
                          subItemPath6={SubList.subItemPath6}
                          subItemName6={SubList.subItemName6}
                          subItemPath7={SubList.subItemPath7}
                          subItemName7={SubList.subItemName7}
                        />
                      );
                    })}
                  </li>
                </ul>
              );
            })}
          </div>
        );
      })}
    </div> /*cataloguefull*/
  );
}; /*catalogue*/

我知道大块头的CatalogueListNames和List是有问题的。另外，我也不确定第二个map() (在一行中使用2个map()是合法的吗？)第一个map()正在工作，而第二个则不起作用。

Answer 1

要扩展@FrankerZ的评论，您可能需要这样的内容。

我不想用手重写所有的项目，所以这个例子不那么庞大，但想法是一样的。

额外的好处是，这个片段自动支持项目中无限数量的children，并将其呈现为嵌套的<ul>，但您可以自然地更改呈现的方式。

​

const items = [
  {
    itemName: "Крупногабаритная техника",
    itemPath: "/bulky_machines",
    children: [
      {
        itemPath: "/fridges",
        itemName: "Холодильники"
      },
      {
        itemPath: "/freezers",
        itemName: "Морозильники"
      }
    ]
  },
  {
    itemName: "Встраиваемая техника",
    itemPath: "/built_in_appliances",
    children: [
      {
        itemPath: "/fridges",
        itemName: "Холодильники"
      },
      {
        itemPath: "/washmachines",
        itemName: "Стиральные машины"
      }
    ]
  }
];

const Item = ({ item, parent }) => (
  <li>
    {item.itemName} (parent={parent ? parent.itemName : "none"})
    {item.children && item.children.length ? (
      <ul>
        {item.children.map((child, index) => (
          <Item item={child} parent={item} key={index} />
        ))}
      </ul>
    ) : null}
  </li>
);

const App = () => (
  <ul>
    {items.map((item, index) => (
      <Item item={item} parent={null} key={index} />
    ))}
  </ul>
);
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<main id="root" />

​