Как ПРАВИЛЬНО передать данные между компонентами React?

แชร์
ฝัง
  • เผยแพร่เมื่อ 1 ต.ค. 2024

ความคิดเห็น • 54

  • @DevMagazineChannel
    @DevMagazineChannel  2 ปีที่แล้ว +12

    Текстовая версия 👉 it-dev-journal.ru/articles/kak-peredavat-dannye-mezhdu-komponentami-v-react-js
    Вопросы, которые точно зададут на собесе по React 👉th-cam.com/video/A0Lp8TMCFhA/w-d-xo.html
    Еще вопросы с собеседований по React 👉‌th-cam.com/video/-6EmxGeYGAw/w-d-xo.html
    Все хуки ReactJS 👉‌th-cam.com/video/3rDlo4-Ytuw/w-d-xo.html

  • @nerofighter472
    @nerofighter472 ปีที่แล้ว +12

    Это лучший туториал спасибо!!!! За труд Ваш хочу пожелать Вам много самого прекрасного: чтобы здоровье было крепким, иммунитет сильным, чтобы удача была постоянной спутницей, а душа переполнена теплом и счастьем! Желаю вам благополучия и достатка в доме, чтобы ваше финансовое положение было крепким и вы могли позволить себе все, что пожелаете, чтобы близкие всегда радовали, дарили любовь и заботу! Пусть каждый новый день будет окрашен яркими событиями, новыми интересными знаниями, приятными встречами и впечатлениями!

  • @АлександрДми
    @АлександрДми 2 ปีที่แล้ว +17

    Спасибо за урок, очень актуально иметь под ругой такой туториал

  • @НадеждаБударина-ы8ш
    @НадеждаБударина-ы8ш 2 ปีที่แล้ว +5

    Спасибо за ваше видео, очень помогло на начальном этапе разобраться в этих дебрях!

  • @avel8965
    @avel8965 2 ปีที่แล้ว +12

    Работаю фронтом меньше месяца, но вот эти схемы я, пожалуй, отработаю, потому что очень часто используются. Спасибо автору )

    • @igormaksymiv113
      @igormaksymiv113 ปีที่แล้ว

      Дружище, как успехи в работе?)

    • @avel8965
      @avel8965 ปีที่แล้ว

      @@igormaksymiv113 да все норм)

    • @igormaksymiv113
      @igormaksymiv113 ปีที่แล้ว

      @@avel8965Красава)
      у тебя стек JS -> React?

    • @avel8965
      @avel8965 ปีที่แล้ว

      @@igormaksymiv113 react typescript mobx

  • @zakiro4277
    @zakiro4277 2 ปีที่แล้ว +8

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

    • @DevMagazineChannel
      @DevMagazineChannel  2 ปีที่แล้ว

      Спасибо)

    • @sergeyvladimirov9994
      @sergeyvladimirov9994 2 ปีที่แล้ว

      Офф документация у реакта вообще мусорная. Документация ни разу мне не помогла. Что то нужно? Туда можно даже не смотреть.

  • @MrPahan252
    @MrPahan252 ปีที่แล้ว +3

    Только начал изучать Реакт и столкнулся с проблемой передачи состояний. Часа два гуглил и на русском и на английском, по итогу нашёл это видео и за 10 минут решил проблему. Спасибо большое! Однозначно добавлю это видео в избранное и буду периодически обращаться к нему на первых парах

  • @murcha5899
    @murcha5899 ปีที่แล้ว +3

    Роскошь!!!невероятно понятное иструктурированное видео! У вас таллант❤

  • @dj_ovosh
    @dj_ovosh ปีที่แล้ว

    А можно true false стейты тоже передать по name? к Child компоненту

  • @VitalyKuznetsov-kd7wp
    @VitalyKuznetsov-kd7wp ปีที่แล้ว

    Можете пожалуйста выложить свежее видео о Redux Toolkit?

  • @ВладиславБогер
    @ВладиславБогер 9 หลายเดือนก่อน

    Бро, Context помог решить проблему
    Спасибо!

  • @jenyaspace
    @jenyaspace ปีที่แล้ว

    Подскажите как передать данные Parent to child, если child пишется в parent не как компонент, а передается через children

  • @VitalyKuznetsov-kd7wp
    @VitalyKuznetsov-kd7wp ปีที่แล้ว +1

    Хочу поблагодарить вас за грамотное объяснение материала. Очень помогло.

  • @masyamyc
    @masyamyc 8 หลายเดือนก่อน

    Просто отличное видео, спасибо

  • @fellenyoup305
    @fellenyoup305 2 ปีที่แล้ว +1

    Наконец то я нашёл, как это делать с помощью функциональных компонентов! (я пока ещё начинающий в React)

  • @timurkoretskyi2153
    @timurkoretskyi2153 2 ปีที่แล้ว +6

    Просто потрясающий урок, автор гений) Жаль, что так мало подписчиков, просмотров, лайков, как по мне, заслуживаете на большее) Продолжайте, отлично получается!!!

  • @sergeyvladimirov9994
    @sergeyvladimirov9994 2 ปีที่แล้ว +1

    Спасибо тебе большое. Я долго искал эту информацию. Отдельное спасибо за главы в видео

  • @ВадимБекмансуров
    @ВадимБекмансуров ปีที่แล้ว

    спасибо

  • @liberty_concord4157
    @liberty_concord4157 2 ปีที่แล้ว +1

    Очень хорошее объяснение и примеры

  • @daimonkor
    @daimonkor 2 ปีที่แล้ว +3

    Как всегда на высоте

  • @nazarlevchuk7773
    @nazarlevchuk7773 2 ปีที่แล้ว

    Подскажи пожалуйсто у меня в консоле ругается на onChange(event.target.value) в консоле пишет undefiend а когда что то ввожу кидает ошибки(пример когда от Child to Child)

  • @Владимир-п9ч4с
    @Владимир-п9ч4с 2 ปีที่แล้ว

    Доброго времени суток у меня такая ошибка "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. Подскажите пожалуйста как это решитью

  • @garag1763
    @garag1763 2 ปีที่แล้ว

    Отличное видео, помог разобраться

  • @makarryzhko7997
    @makarryzhko7997 ปีที่แล้ว

    Брат от души спасибо, выручил❤❤

  • @ЛилияКалашникова-ф9ю
    @ЛилияКалашникова-ф9ю ปีที่แล้ว

    Про 2 случай хотелось бы подробнее , он сложен для понимания , с колбэк. onChange который приходит в props в компоненте Children и onChange внутри это один и тот же onChange

    • @neobulk3761
      @neobulk3761 ปีที่แล้ว

      Ты вопросительные знаки ставил бы, а то непонятно, утверждаешь или же спрашиваешь.

  • @bezbezov8867
    @bezbezov8867 2 ปีที่แล้ว +1

    Спасибо большое! Было бы хорошо если скинули код🙏🏼

  • @johnbaretty9725
    @johnbaretty9725 2 ปีที่แล้ว

    зачем ты всё делаешь от обратного и всё мешаешь?новичкам точно будет подогревать голову

    • @johnbaretty9725
      @johnbaretty9725 2 ปีที่แล้ว

      но всё равно спасибо ,освежил знания

  • @passap_master
    @passap_master 2 ปีที่แล้ว

    как по мне лучших урок

  • @jupiterunone
    @jupiterunone ปีที่แล้ว

    лучший

  • @user_k.alex_
    @user_k.alex_ 2 ปีที่แล้ว

    Bидео очень понравилось, спасибо. Xотелось бы узнать как передать данные между классовыми компонентами!

    • @DevMagazineChannel
      @DevMagazineChannel  2 ปีที่แล้ว +1

      Спасибо! Для классовых компонентов - принцип такой же: пропсы, события и контекст (но работа с ним немного отличается)

  • @ВсеволодРусинский
    @ВсеволодРусинский 2 ปีที่แล้ว

    Круто!

  • @kuna1990
    @kuna1990 2 ปีที่แล้ว

    День добрый, а как передавать введенное значение в поле на другую страницу?

    • @DevMagazineChannel
      @DevMagazineChannel  2 ปีที่แล้ว +2

      Добрый!
      1. через контекст, тогда нужно самый корневой элемент обернуть в Provider;
      2. через стор;
      3. через метод push в библиотеках роутера;
      ...

  • @АнатолийГаврилов-ы2ь
    @АнатолийГаврилов-ы2ь 2 ปีที่แล้ว

    Пушка

  • @VasiliyKolpaxidis
    @VasiliyKolpaxidis ปีที่แล้ว

    Отличное видео.
    Один вопрос. 2 пример передача данных от Child к Parent. Можно ли передать пропсы в Child и при этом обратно передавать колбэк в Parent? Если по другому можно ли совместить 1 и 2 пример???
    Заранее благодарю за ответ.

    • @DevMagazineChannel
      @DevMagazineChannel  ปีที่แล้ว +1

      Спасибо!
      Имеется ввиду реакция на изменение пропса?
      не совсем понял, но наверно вот так
      const Parent = () => {
      const value = setState()
      const handle = () => { /**/ }
      return (
      )
      }
      const Child = ({ value, onEvent }) => {
      useEffect(() => {
      onEvent()
      }, [value])
      return (
      )
      }

    • @VasiliyKolpaxidis
      @VasiliyKolpaxidis ปีที่แล้ว

      @@DevMagazineChannel Я ещё в процессе обучения поэтому задаю такие вопросы.
      С родительского компонента я тяну массив с объектами в дочерний а из дочернего в родительский компонент хочу отправить .target.value. можно ли такое сделать? То есть отправка данных и туда и обратно?
      Слышал о 2 way bounding думал что это оно и есть

    • @DevMagazineChannel
      @DevMagazineChannel  ปีที่แล้ว +1

      .target.value наверно имеется ввиду из инпута - тогда навесить обработчик ввода на инпут и вызывать в этом обработчике проп onEvent
      const Child = ({ array, onEvent }) => {
      return (
      onEvent(event.target.value)} />
      )
      }
      в реакте 2 way bounding нет, вместо этого явно передаем проп и callback функцию

    • @VasiliyKolpaxidis
      @VasiliyKolpaxidis ปีที่แล้ว

      @@DevMagazineChannel даже не мог подумать что так можно. Спасибо за ответ завтра тестить буду

  • @jenerly-liasinjuaru2643
    @jenerly-liasinjuaru2643 ปีที่แล้ว

    А useContext подходит ли для обмена данными между соседними компонентами?

    • @DevMagazineChannel
      @DevMagazineChannel  ปีที่แล้ว

      это не типичный сценарий использования контекста, но подходит