Переключение между компонентами React с переключением состояния и React Router

Я пытался переключить страницу с помощью кнопки Link и списка элементов, когда я нажимаю кнопку Link. В основном я вижу 2 популярных возможных подхода к этому:

  1. Используя реагировать на маршрутизатор и создать маршруты, один для кнопки списка, а другой для элементов списка, который открывается при нажатии на элемент кнопки списка, который получает элементы списка в качестве реквизита в маршрутизаторе.

  2. Передайте свойства элементу списка, но отобразите его на той же странице, но с условием переключения состояния. Пример -

    this.state.showList===true ? :

Здесь я смущен, чтобы выбрать между этими двумя подходами. Я предпочитаю второй подход для переключения между компонентами в зависимости от состояния, так как мне менее комфортно работать с маршрутизатором. Но если количество компонентов на этой странице увеличивается, ее трудно поддерживать, используя значение состояния.

Но я хотел бы знать этот стандартный подход для приложений среднего масштаба.

Любые примеры или указатели будут полезны, спасибо.


reactjs react-router react-router-v4 react-component react-state-management
person beta programmers    schedule 29.07.2019    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я использую оба подхода и различаю инкапсулированную бизнес-логику и модифицирующую логику. Например, у вас есть люди и отношения между этими людьми. Итак, у меня есть 2 маршрута <personId>/details и <personId>/relations. В первом вы увидите сведения о человеке, такие как имя, адрес, номера телефонов, а во втором вы увидите сеть связанных лиц, которые связаны с этим человеком. Для себя я выбираю между этими двумя подходами по тому, что я ожидаю увидеть после перезагрузки страницы (нажав F5). Когда я нахожусь на странице сведений, я хочу снова увидеть подробности, а также я хочу снова увидеть сеть отношений.

Но есть некоторые изменяющие логики, такие как добавление нового нового номера телефона. Обычно вы делаете это, показывая модальное диалоговое окно или расширяя форму с некоторыми входными данными и «ОК» / «Отмена». Когда это диалоговое окно открывается и выполняется перезагрузка страницы, я ожидаю снова увидеть сведения о человеке. Поэтому я реализую этот диалог через {this.state.showAddTelephone && ...}

person Auskennfuchs    schedule 29.07.2019

arrow_upward
1
arrow_downward

На мой взгляд, просто выберите react-router. Маршруты используются в нескольких областях приложения. Логика условного рендеринга может создать слишком много сложности, если она используется во многих местах. Было бы проще просто использовать декларативный подход маршрутизатора без какой-либо логики.

person Train    schedule 29.07.2019
comment
Спасибо за ответ. Это прямо и полезно - person beta programmers; 02.08.2019
comment
Ничего страшного, рад, что помогло. - person Train; 02.08.2019