我在目录列表中有一个项目列表。 ListItem中的每个项目都应具有下拉列表SubList。
我正在使用reactjs（初学者），所以不知道（尚未）有没有使其美丽的选项。
问题：如何访问海量的List及其数据？
我绝对可以使用纯HTML和CSS达到我的目标。但是将来，支持这样的代码会不太好。
因此，我正在尝试使用map（）进行操作，但似乎仍然找不到愚蠢的错误。
所以我的目录列表看起来像that one
和我的代码（仅以1个表为例）：
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出了问题，并且列表位于其中。我也不确定第二个map（）（在一行中使用2个map（）甚至合法吗？）第一个map（）正在工作。第二个不是。
答案 0 :(得分：0)
要扩展@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" />