Отображение вложенных списков в ReactJS

Вы когда-нибудь хотели создать раскрывающийся список, по которому пользователи могут щелкнуть? В этом случае использования этот список имеет больше списков, и каждый список имеет больше списков! Я собираюсь охарактеризовать этот список как объект JavaScript. В этом уроке мы собираемся воспроизвести этот опыт шаг за шагом с нуля.

Требования

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

Начиная с нуля с помощью приложения create-реагировать

После того, как вы все настроите, обязательно удалите ненужный текст. Добавьте 20px к краю компонента приложения. Это делается для удобочитаемости и не позволяет тексту отталкиваться от края экрана.

После этого мы собираемся добавить статические данные в наш файл App.js, чтобы протолкнуть другие наши компоненты. Скопируйте и вставьте объект категорий из моей ссылки на github.

https://github.com/cruzgerman216/вложенные-списки-сделано-в-реакции/blob/main/src/App.js

Мыслительный процесс

Всякий раз, когда пользователь нажимает на каждый текст, мы хотим отобразить любой контент, который находится «там». Каждый div, содержащий текст, будет иметь какое-то состояние, чтобы управлять расширением или сжатием его содержимого. Мы не хотим перебирать этот объект только потому, что не будем контролировать расширение или сжатие вложенных объектов. Что нам нужно сделать в первую очередь, так это создать компонент с полным состоянием, который позволит нам отображать его содержимое с помощью щелчка пользователя.

Компонент с отслеживанием состояния для обработки расширяющихся или сокращающихся списков

Создайте папку «Компоненты». Создайте файл с именем Block.js

Внутри App.js импортируйте Block.js и установите атрибут с именем category для наших статических данных и включите его имя в качестве ключевого атрибута, чтобы избежать повторяющихся ошибок.

В нашем файле Block.js мы хотим иметь возможность отслеживать, расширяется или сжимается div, поэтому создайте вызываемый ключ и установите для него значение false для объекта состояния.

Чтобы убедиться, что все работает, создайте div и распечатайте ключ объектов с именем name из того, что передается как реквизит с именем category.

Вы даже можете использовать console.log для props.data, чтобы увидеть, что происходит, и подумать о том, что мы будем здесь делать. На этом этапе мы хотим щелкнуть этот дочерний элемент div и, как только мы это сделаем, создать новые элементы с той же функциональностью, поскольку они могут расширять и сжимать свое содержимое.

Создайте метод с именем Expand. Этот метод будет отвечать за установку для this.state.on значения false или true.

Чтобы отобразить наш контент, мы собираемся добавить новый ключ в состояние с именем. Таким образом, когда мы перебираем наш объект, мы будем хранить элементы в этом массиве для их отображения. Если вы еще не знаете, если react/jsx увидит массив, полный элементов/компонентов, он отобразит их.

Создайте переменную. Называй как хочешь, я свою обр. Установите его в пустой массив. Этот массив будет захватывать подобъекты из объекта props.data, который проходит через него.

Перебрать объект this.props.category. Мы хотим иметь возможность помещать в этот массив объекты, у которых нет имени ключевого слова, потому что это не объекты, а скорее строки.

Идея рекурсии

Это сложная часть, которая потребует немного размышлений. Мы хотим иметь возможность помещать в этот массив новые элементы с той же функциональностью, что и его родительский компонент. Проблема в том, что мы не можем использовать рекурсию в формате, основанном на классе, только в формате, основанном на функции. Мы не можем реализовать ту же самую функциональность в компоненте без состояния, потому что нам нужно отслеживать, расширяется или сжимается ли div за счет функциональности состояния. Чтобы решить эту проблему, мы собираемся создать отдельный файл с именем Section.js. В этом файле импортируйте Block, а затем включите Block. Передайте реквизиты, которые получает Секция. Будет казаться, что компонент Block рекурсивно находится внутри своего собственного компонента.

Измените app.js, чтобы включить Section.

Измените метод расширения в Block.js, чтобы проталкивать компоненты раздела по мере того, как мы передаем новую информацию о свойствах. Обязательно измените состояние на новый сформированный массив.