Как динамически генерировать раскрывающийся список из вложенного массива в ReactJS
Я могу без проблем сделать вложенный выпадающий список, но я понятия не имею, как сделать его динамическим. Он может идти даже до 5-8 уровней в глубину. Я понимаю, что это можно сделать с помощью функции .map(), которая будет вызываться внутри себя снова, если есть еще какие-то подвыпадающие списки. Таким образом, я мог получить доступ ко всем данным, но что делать дальше, я не знаю.
Массив выглядит примерно так (только его часть):
categories = [
{
title : "Electronics", path : "Electronics", id : 1, subCat: [
{title : "Computers", path : "Electronics->Computers", id : 11, subCat: [
{title : "Desktop", path : "Electronics->Computers->Desktop", id : 111, subCat: [
{title : "Gaming", path : "Electronics->Computers->Desktop->Gaming", id : 1111, subCat: null},
{title : "Office", path : "Electronics->Computers->Desktop->Office", id : 1112, subCat: null}
]},
{title : "Laptops", path : "Electronics->Computers->Laptops", id : 112, subCat: [
{title : "Gaming", path : "Electronics->Computers->Laptops->Gaming", id : 1121, subCat: null},
{title : "Office", path : "Electronics->Computers->Laptops->Office", id : 1122, subCat: null}
]}
]}
]
},
{
title : "Cars", path : "Cars", id : 2, subCat: [
{title : "Parts & Accessories", path : "Cars->Parts & Accessories", id : 21, subCat: [
{title : "Car Parts", path : "Cars->Parts & Accessories->Car Parts", id : 211, subCat: null},
{title : "Car Accessories", path : "Cars->Parts & Accessories->Car Accessories", id : 211, subCat: null},
{title : "Parts", path : "Cars->Parts & Accessories->Parts", id : 212, subCat: null},
{title : "Paintwork", path : "Cars->Parts & Accessories->Paintwork", id : 213, subCat: null},
{title : "Tyres & Rims", path : "Cars->Parts & Accessories->Tyres & Rims", id : 214, subCat: [
{title : "Tyres", path : "Cars->Parts & Accessories->Tyres & Rims->Tyres", id : 2141, subCat: null},
{title : "Rims", path : "Cars->Parts & Accessories->Tyres & Rims->Rims", id : 2142, subCat: null},
{title : "Trims", path : "Cars->Parts & Accessories->Tyres & Rims->Trims", id : 2143, subCat: null},
{title : "Accessories", path : "Cars->Parts & Accessories->Tyres & Rims->Accessories", id : 2144, subCat: [
{title : "Hub Centre Caps", path : "Cars->Parts & Accessories->Tyres & Rims->Accessories->Hub Centre Caps", id : 21441, subCat: null},
{title : "Valve Caps", path : "Cars->Parts & Accessories->Tyres & Rims->Accessories->Valve Caps", id : 21442, subCat: null},
{title : "Tyre Bags", path : "Cars->Parts & Accessories->Tyres & Rims->Accessories->Tyre Bags", id : 21443, subCat: null}
{title : "Bolts & Nut Covers", path : "Cars->Parts & Accessories->Tyres & Rims->Accessories->Bolts & Nut Covers", id : 21444, subCat: null}
]},
]}
]}
]
}
]
Может ли кто-нибудь помочь мне здесь, пожалуйста, с какой-нибудь идеей или примером? Спасибо.
Не могли бы вы предоставить данные, которые вы используете для вложения?
Можете ли вы добавить исходный код?
Добро пожаловать в Stack Overflow SlimEddy! Это не сервис по написанию кода. Похоже, у вас есть хорошее представление о подходе. Попробуйте это и вернитесь с конкретными вопросами, если вы не можете заставить его работать.
Пожалуйста, проверьте мой ответ здесь, он может решить вашу проблему: stackoverflow.com/questions/51004421/…. Таким образом, вы можете создавать неограниченное количество каскадных выпадающих списков.
Пока у меня нет ничего для динамического выпадающего списка. В моем файле у меня есть только функция map(), потому что я не знаю, что делать дальше. Но я добавил, как выглядит мой массив.
@gazdagergo Если я правильно понимаю, то для того, чтобы иметь выпадающий список, я должен использовать <DropDown options = {[ ]} /> каждый раз, верно? Значит, я должен сгенерировать новый массив из существующего, чтобы он имел <DropDown/> правильно?
Да, вы должны сгенерировать этот массив в коде JSX, чтобы вы могли добавить в него элемент JSX (<DropDown />). Если вы динамически получаете исходный массив с сервера в качестве опоры, я рекомендую использовать, например. getDerivedStateFromProps чтобы переназначить его и сохранить в состоянии. Это один из основных недостатков JSX, который заключается в том, что вы можете добавлять даже компоненты в массив или объект в качестве значения. Так почему бы не использовать его.
@gazdagergo немного поиграл со статическими данными, и все работает хорошо. Но есть ли способ отобразить {selectedOption} под выбранным параметром?
Если вы хотите отобразить выбранную опцию более глубоко вложенного раскрывающегося списка в родительском элементе, я рекомендую добавить onSelect prop к DropDown и передать функцию обработчика из верхнего родительского компонента. Внутри DropDown реализуйте некоторый обработчик, который вызывает это onSelect с выбранным значением. Например. запускается кликом или запускается измененным состоянием selectedOption.
@SlimEddy, вы нашли какие-нибудь ответы полезными?
@gazdagergo Ваш комментарий более полезен, чем текущий ответ. Но в вашем комментарии нужно сделать несколько мыслей, прежде чем он сможет добиться успеха, например, воссоздать массив с сервера, и этого шага не должно быть. Поэтому я пытаюсь использовать ваш пример, потому что у меня все равно нет других, и заставить его работать по-моему. И пытаюсь добавить правильный способ отображения дочерних элементов под правильным родителем. Спасибо, в любом случае.
Ответы 1
Если вы хотите сделать что-то, что может быть динамически вложено, вы можете создать компонент, который может отображать себя, а затем передавать текущий уровень элементов для визуализации.
Если вы посмотрите на этот простой пример: https://codesandbox.io/s/rln82loyj4?fontsize=14
Первоначально он отображает один компонент и дает ему массив строк и массивов. В компоненте он просматривает каждый элемент и проверяет, является ли он массивом или нет. Если это массив, он создаст еще один элемент, но увеличит уровень и предоставит следующую группу элементов для сопоставления. Уровень в настоящее время используется для установки поля слева, чтобы он выглядел многоуровневым.
Это довольно простой пример, но концепция должна быть применима к тому, что вы хотите - лучший способ решить вашу проблему - сделать что-то рекурсивным.
Поделитесь фрагментом кода, который у вас есть до сих пор