Передача параметров между компонентами

@_Kirill · Регистрация: 27.10.2016

Студворк — интернет-сервис помощи студентам

Доброго времени суток.

Решил познакомиться с реактом, сделав простенький интернет-магазин и столкнулся с такой проблемой:
у меня есть несколько роутов, главная страница, 404, логин и т.д.
На главной странице 2 компонента: категории товаров и сами товары. Категории так же грузятся из базы.
При первой загрузке список товаров не имеет никакого отбора, но по нажатию на какую-либо категорию он должен перерисоваться, получив из базы список с отбором по категории.
Причем, должен смениться url, чтобы можно было поделиться ссылкой с отбором и при этом хорошо бы ограничиться перерисовкой только списка товаров, чтобы не получать снова категории из базы.
Каким образом в реакте подобные задачи вообще решаются?

ЗЫ: я вообще не уверен, что мне нужно именно передавать параметры между компонентами, возможно надо как-то обработать роуты?
Ну или изменить структуру приложения, я рассмотрю любые варианты

@shilko2013 · 05.01.2019, 23:19

Почитайте про redux

@_Kirill · 06.01.2019, 04:25 **[ТС]**

Да, я знаю про существование редукса, но неужели без него эта задача не решаема?

@Evgen1337 · 06.01.2019, 11:32

https://reacttraining.com/reac... philosophy

@_Kirill · 06.01.2019, 19:36 **[ТС]**

То что надо, прописал роут с параметрами типа "/filters/:type/:id", в компоненте эти параметры доступны через this.props.match.params.type и this.props.match.params.id (в реакте версии 16.0.0)
Спасибо!

ЗЫ: Это работает только при обновлении страницы, т.е. если ходить по ссылкам, если использовать реактовские <Link to={}></Link>, то не работает.

@Evgen1337 · 07.01.2019, 09:26

у меня таких проблем нет

https://reacttraining.com/reac... e-blocking
https://github.com/ReactTraini... updates.md

или если есть mobx или redux может помочь withRouter

@_Kirill · 07.01.2019, 09:34 **[ТС]**

Я не совсем правильно выразился, это не работает в том плане, что уже загруженный компонент не перерисовывается самостоятельно при смене URL без перезагрузки страницы. Я в componentDidUpdate(prevProps, prevState) сравниваю новые параметры со старыми, если отличаются, вызываю setState().
Ну и переделал архитектуру приложения, так как я изначально хотел сделать, видимо, реализовать невозможно без дополнительных инструментов.
В любом случае спасибо.

@Evgen1337 · 07.01.2019, 10:27

ну да historyApi для react-router управляется через биндинги на redux, mobx и у них есть специальный мув на этот случай.
в целом, должно и так все работать...

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .

@_Kirill 5 / 5 / 1 Регистрация: 27.10.2016 Сообщений: 66

	Передача параметров между компонентами 04.01.2019, 17:53. Показов 1919. Ответов 7 Метки рендеринг при смене url (Все метки) Доброго времени суток. Решил познакомиться с реактом, сделав простенький интернет-магазин и столкнулся с такой проблемой: у меня есть несколько роутов, главная страница, 404, логин и т.д. На главной странице 2 компонента: категории товаров и сами товары. Категории так же грузятся из базы. При первой загрузке список товаров не имеет никакого отбора, но по нажатию на какую-либо категорию он должен перерисоваться, получив из базы список с отбором по категории. Причем, должен смениться url, чтобы можно было поделиться ссылкой с отбором и при этом хорошо бы ограничиться перерисовкой только списка товаров, чтобы не получать снова категории из базы. Каким образом в реакте подобные задачи вообще решаются? ЗЫ: я вообще не уверен, что мне нужно именно передавать параметры между компонентами, возможно надо как-то обработать роуты? Ну или изменить структуру приложения, я рассмотрю любые варианты 0

@shilko2013 257 / 234 / 185 Регистрация: 02.04.2016 Сообщений: 898
	05.01.2019, 23:19
	Почитайте про redux 0

@_Kirill 5 / 5 / 1 Регистрация: 27.10.2016 Сообщений: 66
	06.01.2019, 04:25 [ТС]
	Да, я знаю про существование редукса, но неужели без него эта задача не решаема? 0

@Evgen1337 249 / 162 / 68 Регистрация: 10.12.2017 Сообщений: 558
	06.01.2019, 11:32
	Сообщение было отмечено _Kirill как решение Решение https://reacttraining.com/reac... philosophy 1

@_Kirill 5 / 5 / 1 Регистрация: 27.10.2016 Сообщений: 66
	06.01.2019, 19:36 [ТС]
	То что надо, прописал роут с параметрами типа "/filters/:type/:id", в компоненте эти параметры доступны через this.props.match.params.type и this.props.match.params.id (в реакте версии 16.0.0) Спасибо! ЗЫ: Это работает только при обновлении страницы, т.е. если ходить по ссылкам, если использовать реактовские <Link to={}></Link>, то не работает. 0

@Evgen1337 249 / 162 / 68 Регистрация: 10.12.2017 Сообщений: 558
	07.01.2019, 09:26
	у меня таких проблем нет https://reacttraining.com/reac... e-blocking https://github.com/ReactTraini... updates.md или если есть mobx или redux может помочь withRouter 0

@_Kirill 5 / 5 / 1 Регистрация: 27.10.2016 Сообщений: 66
	07.01.2019, 09:34 [ТС]
	Я не совсем правильно выразился, это не работает в том плане, что уже загруженный компонент не перерисовывается самостоятельно при смене URL без перезагрузки страницы. Я в componentDidUpdate(prevProps, prevState) сравниваю новые параметры со старыми, если отличаются, вызываю setState(). Ну и переделал архитектуру приложения, так как я изначально хотел сделать, видимо, реализовать невозможно без дополнительных инструментов. В любом случае спасибо. 0

@Evgen1337 249 / 162 / 68 Регистрация: 10.12.2017 Сообщений: 558
	07.01.2019, 10:27
	ну да historyApi для react-router управляется через биндинги на redux, mobx и у них есть специальный мув на этот случай. в целом, должно и так все работать... 0

Передача параметров между компонентами

Решение