Како да направите скупи мени за навигацију користећи Реацт

Како да направите скупи мени за навигацију користећи Реацт

Навигациони мени бочне траке обично се састоји од вертикалне листе веза. Можете креирати скуп веза у Реацт-у користећи реацт-роутер-дом.





Пратите ове кораке да бисте креирали Реацт бочни навигациони мени са везама које садрже иконе корисничког интерфејса материјала. Везе ће приказати различите странице када кликнете на њих.





Креирање Реацт апликације

Ако већ имате а Реацт пројекат , слободно пређите на следећи корак.





МАКЕУСЕОФ ВИДЕО ДАНА

Можете користити команду цреате-реацт-апп да бисте брзо покренули и покренули Реацт. Инсталира све зависности и конфигурације за вас.

Покрените следећу команду да бисте креирали Реацт пројекат под називом реацт-сиденав.



31А3690Б89БФ46053Д334812ЕББ1ДД1778ДФБАФ1

Ово ће створити фасциклу реацт-сиденав са неким датотекама да бисте започели. Да бисте мало очистили ову фасциклу, идите до фасцикле срц и замените садржај Апп.јс овим:

62Ф145Ц5Е8Е7Ц6601382БЕА87868Ф2Ф9Е603Ф631

Креирање компоненте за навигацију

Компонента за навигацију коју ћете креирати ће изгледати овако:





како направити снимак екрана на ХП лаптопу без дугмета за штампање
  Нескупљени приказ Реацт навигационог менија

Прилично је једноставно, али када завршите, требало би да будете у могућности да га модификујете тако да одговара вашим потребама. Можете да скупите компоненту за навигацију помоћу иконе двоструке стрелице на врху:

  Скупљени приказ Реацт навигационог менија

Започните креирањем несажетог приказа. Осим иконе стрелице, бочна трака садржи листу ставки. Свака од ових ставки има икону и неки текст. Уместо да понављате креирање елемента за сваки, можете да ускладиштите податке за сваку ставку у низу, а затим да итерирате преко њега користећи функцију мапе.





Да бисте демонстрирали, направите нову фасциклу под називом либ и додајте нову датотеку под називом навДата.јс.

54875Б91Е84Е30Б86ЕЦД70Д45985Ц9Д9БФ7ЕЕ25А

Горе коришћене иконе су из библиотеке Материал УИ, па је прво инсталирајте помоћу ове команде:

9Ц3Д7БД0ФА690027Ц4ДБ403546937665495Е1304

Затим креирајте фасциклу под називом Компоненте и додајте нову компоненту под називом Сиденав.јс .

У овој датотеци увезите навДата из ../либ и креирајте скелет за Сиденав функција:

07ААА9629БЦ8187Б257378Ц39770БДБ3ФФФ5ЦА71

Да бисте креирали везе, модификујте див елемент у овој компоненти на ово:

464Д2Ц5Е256А2ФББЦААЕ727ДА6ДА810АФА9Ф7ЕБ3

Ова компонента креира везу за навигацију која садржи икону и текст везе за сваку итерацију у функцији мапе.

Елемент дугмета садржи икону стрелице налево из библиотеке корисничког интерфејса материјала. Увезите га на врх компоненте користећи овај код.

ДБ8Е6245Е505А3659ЕБ7194А53ФФЦ3Д3Ф332Д575

Можда сте такође приметили да имена класа упућују на објекат стилова. То је зато што овај водич користи ЦСС модуле. ЦСС модули вам омогућавају да креирате стилове локалног опсега у Реацт-у . Не морате ништа да инсталирате или конфигуришете ако сте користили цреате-реацт-апп да покренете овај пројекат.

У фасцикли Компоненте креирајте нову датотеку под називом сиденав.модуле.цсс и додајте следеће:

46А03Е6ЕЦБФД18Б3Ц8ЕЕ5ДФ24ДФ052АДЦЦ9ДЦ8Б3

Подешавање Реацт рутера

Елементи див које враћа функција мапе треба да буду везе. У Реацт-у можете креирати везе и руте користећи реацт-роутер-дом.

У терминалу инсталирајте реацт-роутер-дом преко нпм-а.

како да затражите повраћај новца на стеам -у
ЕА26Б87ДЕ5Д76Е9ДЦ810ФЦД8Б12Б54Ф58Ф52ФЕ2Е

Ова команда инсталира најновију верзију реацт-роутер-дом.

У Индек.јс, умотајте компоненту апликације са рутером.

54ФД1Ф42Ф3Ц8А140246А9ЕЕ913554АБ1Е262А541

Затим у Апп.јс додајте своје руте.

980ЦЦ01954Ф312133ЦЦА907БФ7БД1АА2ФБ611ЦЦ9

Измените Апп.цсс овим стиловима.

Д20512036БД18Д5006Ц2ЕАДД8998751ЕФ5Ц0Ф3Б0

Свака рута враћа другу страницу у зависности од УРЛ-а који је прослеђен на реквизити за стазу . Направите нову фасциклу под називом Странице и додајте четири компоненте — страницу Почетна, Истражите, Статистика и Подешавања. Ево примера:

6А793АА95ЕД66024ФББФ346Ф36Б202858037Е2Б9

Ако посетите /хоме путању, требало би да видите „Хоме“.

Везе на бочној траци треба да воде до одговарајуће странице када кликнете на њих. У Сиденав.јс, измените функцију мапе тако да користи компоненту НавЛинк из реацт-роутер-дом уместо елемента див.

0ЕЦ8407ЕФ08ЦЕ6Ц74ЕДЦА205424Ф7ДЕЕ54А3ЦА2Б

Не заборавите да увезете НавЛинк на врху датотеке.

612А17ЦЦ5ЕЦ10316ЕД614БАБФЦ10ЦА65Д60Е8Ф19

НавЛинк прима УРЛ путању за везу преко то проп.

До ове тачке, навигациона трака је отворена. Да бисте га учинили склопивим, можете променити његову ширину променом ЦСС класе када корисник кликне на дугме са стрелицом. Затим можете поново променити ЦСС класу да бисте је отворили.

Да бисте постигли ову функцију пребацивања, морате знати када је бочна трака отворена и затворена.

За ово користите куку усеСтате. Ово Реаговати кука омогућава вам да додате и пратите стање у функционалној компоненти.

У сидеНав.јс направите куку за отворено стање.

како рећи да ли неко даљински гледа ваш рачунар
ЕА51АЕФ81376372Д47ЕФЦФЦ1Е3ФЕ8А9369ЦДДФБ6

Иницијализујте отворено стање на тачно, тако да ће бочна трака увек бити отворена када покренете апликацију.

Затим креирајте функцију која ће променити ово стање.

А6Д959027917Ф61Е4ДАФ69Д45050927Е4Ф10ФФ9Б

Сада можете користити отворену вредност за креирање динамичких ЦСС класа попут ове:

677248Ф0Ф2Д655ФА8БА000ЕЦ2ЦЕФФЦ6Б4АД1ФЕЦЕ

Имена ЦСС класа која се користе биће одређена отвореним стањем. На пример, ако је опен тачно, спољашњи елемент див ће имати име класе сиденав. У супротном, класа ће бити сиденавд.

Ово је исто за икону, која се мења у икону стрелице надесно када затворите бочну траку.

Не заборавите да га увезете.

65Д93ДФЦЦ025Ф1БА1124БДЦБЦ0384БФ234Ф46ФА8

Компонента бочне траке је сада склопива.

Узмите комплетан код из овога ГитХуб спремиште и пробајте сами.

Стилинг Реацт Цомпонентс

Реацт олакшава прављење склопиве компоненте за навигацију. Можете користити неке од алата које Реацт пружа као што је реацт-роутер-дом за руковање рутирањем и куке за праћење срушеног стања.

Такође можете користити ЦСС модуле за стилизовање компоненти, иако не морате. Користите их за креирање класа у локалном опсегу које су јединствене и које можете избацити из пакета ако се не користе.