// В частности, useState
Итак, вы какое-то время используете React и считаете, что классы — это лучшее решение. Они могут отслеживать состояние и методы жизненного цикла, в отличие от этих тупых функциональных компонентов, я прав?
Ну, у тебя много нервов. Любой, кто слышал о хуках, понимает, что за ними будущее React, поэтому давайте приступим к пониманию того, как использовать хуки.
Недавно я сделал целевую страницу для великой корпорации Hooli специально для того, чтобы поиграть с выпадающим списком в навигационной панели.
В React ключевое значение имеет понимание макета вашего сайта.
Это самый высокий контейнер, содержащий все наши другие контейнеры, включая Navbar, который является компонентом, который будет содержать наш раскрывающийся список. Для всех предварительных вещей я импортировал несколько иконок SVG, чтобы использовать их в качестве иконок.
Здесь есть четыре значка, включая логотип hooli, каждый из которых представляет собой отдельный компонент, состоящий из кода SVG. Четвертый значок <ArrowDown /> — это компонент Navitem, к которому мы прикрепляем раскрывающийся список.
Во-первых, вам нужно импортировать хук. В самом верху, где вы импортируете React, также импортируйте { useState }, так что это будет выглядеть так import React, { useState } from ‘react’.
Как показано ниже, useState() — это хук, который устанавливает начальное состояние, в данном случае — false. open — это состояние, а setOpen — функция обратного вызова, которая переключает состояние на основе логического кода в onClick. В изменяющемся состоянии крючков вам всегда нужна эта пара; имя состояния и функция обратного вызова, которая что-то делает с состоянием.
onClick вызывает setOpen, который переключает !open. В этом коде, если у конкретного NavItem есть переданные дочерние элементы, как в JSX, являющемся <NavItem icon={<ArrowDown />}><Dropmenu /></NavItem>, а состояние open установлено на true, будет отображаться props.children.
Если бы это был компонент класса для отслеживания состояния, вам нужно было бы записать состояние как объект, а также setState() в функции обратного вызова:
Занятия были великолепны, пока они существовали, но будущее за функциональными компонентами.
