Как ПРАВИЛЬНО передать данные между компонентами React?
#React #reactjs
👉 Текстовая версия: it-dev-journal.ru/articles/ka...
В этом видео рассмотрим способы передачи данных между React компонентами - от дочернего компонента к родительскому, от родительского компонента к дочернему, между соседними компонентами, между компонентами на разных уровнях иерархии. Здесь вы найдете ответы на вопросы и на такие кейсы как: Обмен данными между компонентами React JS, Поднятие состояния в React, Передача данных между компонентами в React, Способы передачи данных между компонентами в React, Подъём состояния выше по иерархии, Как передать данные от одного компонента к другомy?
Мы в соцсетях:
👉 Сайт: it-dev-journal.ru
💻 Telegram: t.me/devmagazinechannel
💻 Twitter: / _devmagazine
💻 GitHub: github.com/vadimkorr
☕️ Поддержать: www.donationalerts.com/r/devm...
Плейлисты и курсы:
📃 Исходный код: t.me/devmagazinechannel/142
💡 Все о ReactJS: • 📘 ReactJS
💡 Как пройти ReactJS собеседование: • 🚀 Собеседование React ...
💡 ReactJS хуки: • 🐠 React хуки
💡 Redux: • ☕️ Redux курс
💡 Redux Saga: • 🍏 Redux Saga курс
💡 Как создать слайдер на ReactJS: • 🎪 Как создать СЛАЙДЕР ...
💡 Svelte: • 🌴 Svelte курс
💡 Sass: • 📔 Sass курс
💡 GraphQL: • 💪 GraphQL
💡 JavaScript: • 📜 JavaScript
00:00 - О примере
02:32 - Parent to child
04:23 - Child to Parent
07:01 - Sibling to Sibling (между соседними компонентами)
10:38 - Parent to Grandchild c пробросом пропсов (prop drilling)
13:09 - Parent to Grandchild с контекстом (React Context API)
19:50 - Еще раз о передаче данных в React
#devmagazine #devmagazinechannel
Пікірлер: 54
Текстовая версия 👉 it-dev-journal.ru/articles/kak-peredavat-dannye-mezhdu-komponentami-v-react-js Вопросы, которые точно зададут на собесе по React 👉kzread.info/dash/bejne/c2SA0pqNfaasmKQ.html Еще вопросы с собеседований по React 👉kzread.info/dash/bejne/X2p5z9qAlbytcdo.html Все хуки ReactJS 👉kzread.info/dash/bejne/ZaZ4ztFtXbzapdo.html
Это лучший туториал спасибо!!!! За труд Ваш хочу пожелать Вам много самого прекрасного: чтобы здоровье было крепким, иммунитет сильным, чтобы удача была постоянной спутницей, а душа переполнена теплом и счастьем! Желаю вам благополучия и достатка в доме, чтобы ваше финансовое положение было крепким и вы могли позволить себе все, что пожелаете, чтобы близкие всегда радовали, дарили любовь и заботу! Пусть каждый новый день будет окрашен яркими событиями, новыми интересными знаниями, приятными встречами и впечатлениями!
Спасибо за урок, очень актуально иметь под ругой такой туториал
Только начал изучать Реакт и столкнулся с проблемой передачи состояний. Часа два гуглил и на русском и на английском, по итогу нашёл это видео и за 10 минут решил проблему. Спасибо большое! Однозначно добавлю это видео в избранное и буду периодически обращаться к нему на первых парах
Хочу поблагодарить вас за грамотное объяснение материала. Очень помогло.
Работаю фронтом меньше месяца, но вот эти схемы я, пожалуй, отработаю, потому что очень часто используются. Спасибо автору )
@igormaksymiv113
Жыл бұрын
Дружище, как успехи в работе?)
@avel8965
Жыл бұрын
@@igormaksymiv113 да все норм)
@igormaksymiv113
Жыл бұрын
@@avel8965Красава) у тебя стек JS -> React?
@avel8965
Жыл бұрын
@@igormaksymiv113 react typescript mobx
Спасибо за ваше видео, очень помогло на начальном этапе разобраться в этих дебрях!
Роскошь!!!невероятно понятное иструктурированное видео! У вас таллант❤
Просто потрясающий урок, автор гений) Жаль, что так мало подписчиков, просмотров, лайков, как по мне, заслуживаете на большее) Продолжайте, отлично получается!!!
@DevMagazineChannel
2 жыл бұрын
Спасибо!)
Просто отличное видео, спасибо
Спасибо тебе большое. Я долго искал эту информацию. Отдельное спасибо за главы в видео
Наконец то я нашёл, как это делать с помощью функциональных компонентов! (я пока ещё начинающий в React)
Отличное видео, помог разобраться
Очень хорошее объяснение и примеры
Бро, Context помог решить проблему Спасибо!
Как всегда на высоте
@DevMagazineChannel
2 жыл бұрын
Благодарю!)
Брат от души спасибо, выручил❤❤
как по мне лучших урок
Круто!
очень хорошо структурированный урок наконецто нашёл) всё ясно, а то запарился не нашел в документации как отправлять данные наверх обратно из ребенка к родителю. я новичок если кто в документации найдет скиньте ссылку на эту инфу
@DevMagazineChannel
2 жыл бұрын
Спасибо)
@sergeyvladimirov9994
2 жыл бұрын
Офф документация у реакта вообще мусорная. Документация ни разу мне не помогла. Что то нужно? Туда можно даже не смотреть.
лучший
спасибо
Пушка
Можете пожалуйста выложить свежее видео о Redux Toolkit?
Bидео очень понравилось, спасибо. Xотелось бы узнать как передать данные между классовыми компонентами!
@DevMagazineChannel
2 жыл бұрын
Спасибо! Для классовых компонентов - принцип такой же: пропсы, события и контекст (но работа с ним немного отличается)
Подскажи пожалуйсто у меня в консоле ругается на onChange(event.target.value) в консоле пишет undefiend а когда что то ввожу кидает ошибки(пример когда от Child to Child)
А можно true false стейты тоже передать по name? к Child компоненту
Доброго времени суток у меня такая ошибка "Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component." Документацию я читал но там используется классовый метод а мне нужен функциональный и у меня глобальный state. Подскажите пожалуйста как это решитью
Про 2 случай хотелось бы подробнее , он сложен для понимания , с колбэк. onChange который приходит в props в компоненте Children и onChange внутри это один и тот же onChange
@neobulk3761
11 ай бұрын
Ты вопросительные знаки ставил бы, а то непонятно, утверждаешь или же спрашиваешь.
Подскажите как передать данные Parent to child, если child пишется в parent не как компонент, а передается через children
День добрый, а как передавать введенное значение в поле на другую страницу?
@DevMagazineChannel
2 жыл бұрын
Добрый! 1. через контекст, тогда нужно самый корневой элемент обернуть в Provider; 2. через стор; 3. через метод push в библиотеках роутера; ...
Отличное видео. Один вопрос. 2 пример передача данных от Child к Parent. Можно ли передать пропсы в Child и при этом обратно передавать колбэк в Parent? Если по другому можно ли совместить 1 и 2 пример??? Заранее благодарю за ответ.
@DevMagazineChannel
Жыл бұрын
Спасибо! Имеется ввиду реакция на изменение пропса? не совсем понял, но наверно вот так const Parent = () => { const value = setState() const handle = () => { /**/ } return ( ) } const Child = ({ value, onEvent }) => { useEffect(() => { onEvent() }, [value]) return ( ) }
@VasiliyKolpaxidis
Жыл бұрын
@@DevMagazineChannel Я ещё в процессе обучения поэтому задаю такие вопросы. С родительского компонента я тяну массив с объектами в дочерний а из дочернего в родительский компонент хочу отправить .target.value. можно ли такое сделать? То есть отправка данных и туда и обратно? Слышал о 2 way bounding думал что это оно и есть
@DevMagazineChannel
Жыл бұрын
.target.value наверно имеется ввиду из инпута - тогда навесить обработчик ввода на инпут и вызывать в этом обработчике проп onEvent const Child = ({ array, onEvent }) => { return ( onEvent(event.target.value)} /> ) } в реакте 2 way bounding нет, вместо этого явно передаем проп и callback функцию
@VasiliyKolpaxidis
Жыл бұрын
@@DevMagazineChannel даже не мог подумать что так можно. Спасибо за ответ завтра тестить буду
Спасибо большое! Было бы хорошо если скинули код🙏🏼
@DevMagazineChannel
2 жыл бұрын
t.me/devmagazinechannel/142
@bezbezov8867
2 жыл бұрын
Спасибо большое!
А useContext подходит ли для обмена данными между соседними компонентами?
@DevMagazineChannel
10 ай бұрын
это не типичный сценарий использования контекста, но подходит
зачем ты всё делаешь от обратного и всё мешаешь?новичкам точно будет подогревать голову
@johnbaretty9725
Жыл бұрын
но всё равно спасибо ,освежил знания