Как передать данные между компонентами react
Перейти к содержимому

Как передать данные между компонентами react

  • автор:

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

В реакте поток данных — однонаправленный. Это значит что данные передаются как водопад, сверху вниз, от родителя к ребенку, через props. Что такое props? Это неизменяемый объект, предназначенный только для чтения. Проще понять если думать о компонентах, как о функциях(а они по сути ими и являются), props—это просто аргумент функции, с которым мы можем работать внутри, но не изменять.

Родитель ➡️ Ребенок — используй Props

Это самый простой способ передачи данных.
1. В родительском компоненте передаём данные из стейта в дочерний.

2. В дочернем принимаем и выводим.

Props:

Родитель ⬅️ Ребенок — используй Callback

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

1. Создаём в родителе функцию updateData . У неё есть входной параметр value , этот параметр мы присваиваем в стейт нашего компонента, с помощью функции setState . Бумеранг готов!

updateData = (value) =>  this.setState(< name: value >)>

2. Передаём в дочерний элемент через props функцию updateData . Мы запустили бумеранг 🙂

3. В дочернем элементе я создала кнопку, при клике на неё будет вызываться функция, которую мы передавали с помощью props. Ей передается новый параметр для текста, именно его мы хотим передать в родителя. Бумеранг возвращается назад.

 

Ребенок ➡️ Ребенок—используй родителя.

Для того чтобы передать данные между соседними компонентами, нужно использовать посредника—их родителя. Сначала нужно передать данные от ребенка к родителю как аргумент коллбека. Потом присвоить эти данные в стейт родителя и передать через props другому компоненту.

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

Иногда нужно, чтобы состояние двух компонентов всегда менялось вместе. Для этого нужно удалить их собственное состояние, переместить его к их ближайшему общему родителю, а затем передать его им через пропсы. Это известно как поднятие состояния вверх, и это одна из самых распространенных вещей, которые вы будете делать при написании React кода.

Содержание туториала по React Иногда нужно, чтобы состояние двух компонентов всегда менялось вместе. Для этого нужно удалить их собственное состояние, переместить его к их ближайшему общему родителю, а затем передать его им через пропсы. Это известно как поднятие состояния вверх, и это одна из самых распространенных вещей, которые вы будете делать при написании React кода.

Поднятие состояния на примере

  • Accordion
    • Panel
    • Panel
    import < useState >from 'react'; function Panel(< title, children >) < const [isActive, setIsActive] = useState(false); return ( 
    ) : ( )>
    ); > export default function Accordion() < return ( <>

    Almaty, Kazakhstan

    With a population of about 2 million, Almaty is Kazakhstan's largest city. From 1929 to 1997, it was its capital city. The name comes from алма, the Kazakh word for "apple" and is often translated as "full of apples". In fact, the region surrounding Almaty is thought to be the ancestral home of the apple, and the wild Malus sieversii is considered a likely candidate for the ancestor of the modern domestic apple. ); >

    1. Удалить состояние из дочерних компонентов.
    2. Передать захардкоженные данные от общего родителя.
    3. Добавить состояние к общему родителю и передать его вместе с обработчиками событий.

    Шаг 1: Удалить состояние из дочерних компонентов

    Вы передадите контроль над isActive панели ее родительскому компоненту. Это означает, что вместо этого родительский компонент будет передавать isActive в Panel в качестве пропса. Начните с удаления этой строки из компонента Panel :

    const [isActive, setIsActive] = useState(false);

    Вместо этого добавьте isActive в список пропсов Panel :

    function Panel(< title, children, isActive >) 

    Теперь родительский компонент компонента Panel может управлять isActive , передавая его как проп. И наоборот, компонент Panel теперь не имеет контроля над значением isActive — теперь это зависит от родительского компонента.

    Шаг 2. Передать захардкоженные данные от общего родителя

    • Accordion (ближайший общий родитель)
      • Panel
      • Panel
      import < useState >from 'react'; export default function Accordion() < return ( <>

      Almaty, Kazakhstan

      > With a population of about 2 million, Almaty is Kazakhstan's largest city. From 1929 to 1997, it was its capital city. > The name comes from алма, the Kazakh word for "apple" and is often translated as "full of apples". In fact, the region surrounding Almaty is thought to be the ancestral home of the apple, and the wild Malus sieversii is considered a likely candidate for the ancestor of the modern domestic apple. ); > function Panel(< title, children, isActive >) < return (
      ) : ( )>
      ); >

      Шаг 3: Добавить состояние к общему родителю

      Поднятие состояния часто меняет характер того, что вы храните как состояние. При этом одновременно должна быть активна только одна панель. Это означает, что общий родительский компонент Accordion должен отслеживать, какая панель является активной. Вместо булевского значения он может использовать число в качестве индекса активной панели для переменной состояния:

      const [activeIndex, setActiveIndex] = useState(0);

      Когда activeIndex равен 0 , активна первая панель, а когда 1 — вторая. При нажатии кнопки «Показать» на любой из панелей необходимо изменить активный индекс в Accordion . Panel не может установить состояние activeIndex напрямую, потому что оно определено внутри Accordion . Компонент Accordion должен явно разрешить компоненту Panel изменять свое состояние, передав обработчик событий в качестве пропса:

      <> onShow= <() =>setActiveIndex(0)>> . onShow= <() =>setActiveIndex(1)>> . 

      import < useState >from 'react'; export default function Accordion() < const [activeIndex, setActiveIndex] = useState(0); return ( <>

      Almaty, Kazakhstan

      onShow= <() =>setActiveIndex(0)> > With a population of about 2 million, Almaty is Kazakhstan's largest city. From 1929 to 1997, it was its capital city. onShow= <() =>setActiveIndex(1)> > The name comes from алма, the Kazakh word for "apple" and is often translated as "full of apples". In fact, the region surrounding Almaty is thought to be the ancestral home of the apple, and the wild Malus sieversii is considered a likely candidate for the ancestor of the modern domestic apple. ); > function Panel(< title, children, isActive, onShow >) < return (
      : >
      ); >

      Это завершает подъем состояния вверх. Перемещение состояния в общий родительский компонент позволило согласовать две панели. Использование активного индекса вместо двух флажков «показано» гарантировало, что в данный момент активна только одна панель. А передача обработчика событий дочернему компоненту позволяла дочернему компоненту изменять состояние родителя.

      Управляемые и неуправляемые компоненты

      Обычно компонент с некоторым локальным состоянием называют "неуправляемым". Например, исходный компонент Panel с переменной состояния isActive не контролируется, поскольку его родитель не может влиять на то, активна панель или нет. Напротив, вы можете сказать, что компонент "управляется", когда важная информация в нем управляется пропсами, а не его собственным локальным состоянием. Это позволяет родительскому компоненту полностью определять свое поведение. Последний компонент Panel с пропсом isActive управляется компонентом Accordion . Неуправляемые компоненты проще использовать в своих родительских компонентах, поскольку они требуют меньшей настройки. Но они менее гибкие, когда вы хотите скоординировать их вместе. Управляемые компоненты максимально гибкие, но требуют от родительских компонентов полной настройки их пропсами. На практике «управляемый» и «неуправляемый» не являются строгими техническими терминами — каждый компонент обычно имеет некоторое сочетание локального состояния и свойств. Тем не менее, это полезный способ рассказать о том, как устроены компоненты и какие возможности они предлагают. При написании компонента учитывайте, какая информация в нем должна управляться (через пропсы), а какая информация не должна управляться (через состояние). Но вы всегда можете передумать и провести рефакторинг позже.

      Единый источник правды для каждого состояния

      В React приложении многие компоненты будут иметь собственное состояние. Некоторое состояние может «жить» рядом с компонентами-листьями (компонентами в нижней части дерева), такими как инпуты ( ). Другое состояние может «жить» ближе к верху приложения. Например, даже клиентские библиотеки маршрутизации обычно реализуются путем сохранения текущего маршрута в состоянии React и передачи его в пропсах Для каждой уникальной части состояния вы выберете компонент, который «владеет» им. Этот принцип также известен как наличие «единого источника истины». Это не означает, что все состояния хранятся в одном месте, но для каждой части состояния существует определенный компонент, который содержит эту часть информации. Вместо того, чтобы дублировать общее состояние между компонентами, вы поднимете его до их общего родителя и передадите его дочерним элементам, которым оно нужно. Ваше приложение будет меняться по мере того, как вы будете над ним работать. Обычно вы перемещаете состояние вниз или назад, пока вы все еще выясняете, где «живет» каждая часть состояния. Это все часть процесса. Чтобы увидеть, как это выглядит на практике с еще несколькими компонентами, прочитайте статью Мышление в стиле React.

      Резюме

      • Если вы хотите скоординировать два компонента, переместите их состояние в их общий родитель.
      • Затем передайте информацию через пропсы от их общего родителя.
      • Наконец, передайте обработчики событий, чтобы потомки могли изменить состояние родителя.
      • Полезно рассматривать компоненты как «управляемые» (управляемые пропсами) или «неуправляемые» (управляемые состоянием).
      • Таким образом можно выделить такие случаи передачи данных в React:
        • от родительского компонента к дочернему;
        • от дочернего компонента к родительскому;
        • между соседними компонентами;
        • от компонента к компоненту-потомку (через несколько уровней вниз);
        • от компонента к компоненту-предку (через несколько уровней вверх).

        JavaScript в фигурных скобках в JSX в React компонентах

        Как передавать данные между компонентами в ReactJS

        В React можно разными способами передавать данные между компонентами. Применимость каждого способа определяется направлением движения данных. Данные могут двигаться от дочернего компонента к родительскому или наоборот. Данные могут двигаться глубоко - от корневого элемента до элемента-потомка. Данными могут обмениваться соседние элементы. В этой статье мы рассмотрим как передавать данные в каждом конкретном случае.

        • от родительского компонента к дочернему;
        • от дочернего компонента к родительскому;
        • между соседними компонентами;
        • от компонента к компоненту-потомку (через несколько уровней вниз);
        • от компонента к компоненту-предку (через несколько уровней вверх).
        • через пропсы;
        • используя callback-функцию;
        • пробросом пропсов от уровня к уровню (prop drilling);
        • при помощи контекста (React Context AP);
        • через хранилище (store);

        От родительского компонента к дочернему

        Наиболее простой и часто встречающийся случай - это случай, когда дочерний компонент принимает данные от родителя через пропсы.

        import < useState >from 'react' const Parent = () => < const [value, setValue] = useState('') const handleChange = (event) => < setValue(event.target.value) >return ( 
        /> />
        ) > const Child = (< value >) => < return ( Value is: '> ) >

        От дочернего компонента к родительскому

        Если необходимо передать данные от дочернего реакт компонента к родительскому, используются функции обратного вызова (callback-функции).

        import < useState >from 'react' const Child = (< onChange >) => < const handleChange = (event) => < onChange(event.target.value) // callback-функция >return ( /> ) > const Parent = () => < const [value, setValue] = useState('') const handleChange = (value) => < setValue(value) >return ( 
        Value is: '> />
        ) >

        Между соседними компонентами

        Данные между соседними компонентами, т.е. между компонентами на одном уровне, можно передать через общий предок. Обычно данные от одного Реакт компонента передаются вверх, в компонент-предок, через callback-функцию, а компонент-предок передает их в другой компонент через проп.

        import < useState >from 'react' const Parent = () => < const [value, setValue] = useState('') const handleChange = (value) => < setValue(value) >return ( 
        /> />
        ) > const Sibling1 = (< onChange >) => < const handleChange = (event) => < onChange(event.target.value) >return ( /> ) > const Sibling2 = (< value>) => < return ( Value is: '> ) >

        Через несколько уровней вверх/вниз

        Если компоненты находится в несколько уровнях друг от друга, то также можно передать проп. Этот проп придется описывать во всех компонентах на всех промежуточных уровнях. Эта ситуация называется prop drilling. Если уровней много, то такой способ покажется не очень удобным. Если нужно передавать данные на несколько уровней вверх, то также придется описывать и вызывать callback-функцию на всех промежуточных уровнях. Однако, в подобных случаях можно использовать Context API (пример которого приведен ниже), или state management библиотеки, такие как Redux, MobX, Recoil и т.д.

        import < useState, useContext, createContext >from 'react' // создаем контекст const ValueContext = createContext() // Component1 записывает данные в контекст ValueContext const Component1 = () => < const < setValue >= useContext(ValueContext) const handleChange = (event) => < setValue(event.target.value) >return ( /> ) > // Component2 читает данные из контекста ValueContext const Component2 = () => < const < value >= useContext(ValueContext) return ( Value is: '> ) > // компоненты, которым необходим доступ к контексту, // должны быть обернуты в Provider export default function App() < const [value, setValue] = useState('') return ( >>   ) >

        5 кастомных React хуков, которые улучшат ваш код

        год назад · 3 мин. на чтение

        В этой статье рассмотрим несколько очень полезных React хуков.

        1. Хук useWindowSize - хук для получения размера экрана

        Я уверен, что в некоторых проектах, над которыми вы работали, вам нужно было получить ширину и высоту окна пользователя. Так вот, теперь у вас есть хук для этого, так что вы можете сделать это еще проще, чем раньше.

        import < useState, useEffect >from "react"; interface WindowSize < width: number; height: number; >const useWindowSize = (): WindowSize => < const [windowSize, setWindowSize] = useState(< width: window.innerWidth, height: window.innerHeight, >); useEffect(() => < const handleResize = () =>< setWindowSize(< width: window.innerWidth, height: window.innerHeight, >); >; window.addEventListener("resize", handleResize); return () => < window.removeEventListener("resize", handleResize); >; >, []); return windowSize; >;

        Этот хук может быть особенно полезен при реализации отзывчивого дизайна, когда по какой-то причине вам нужно запустить определенный код при определенных размерах. Более продвинутый вариант этого хука можно найти в статье “Хук useResize для отслеживания ширины экрана в ReactJS”.

        2️. Хук useKeyPress - хук для определения нажатия клавиши

        Следующий хук позволяет определить, когда нажата определенная клавиша. Это может вызвать события или действия, основанные на нажатой клавише. Например, для закрытия модального окна, отправки формы и т.д.

        import < useState, useEffect >from "react"; const useKeyPress = (targetKey: string): boolean => < const [keyPressed, setKeyPressed] = useState(false); const downHandler = (< key >: KeyboardEvent) => < if (key === targetKey) < setKeyPressed(true); >>; const upHandler = (< key >: KeyboardEvent) => < if (key === targetKey) < setKeyPressed(false); >>; useEffect(() => < window.addEventListener("keydown", downHandler); window.addEventListener("keyup", upHandler); return () =>< window.removeEventListener("keydown", downHandler); window.removeEventListener("keyup", upHandler); >; >, []); return keyPressed; >;
        const closeModalKeyPress = useKeyPress("Escape");

        3. Хук useInterval - хук для вызова функции setInterval

        Этот хук позволяет вам использовать функцию setInterval в качестве хука. Как и функция setInterval , этот хук имеет множество применений, например, анимация, обновление данных через регулярные промежутки времени или даже установка таймера.

        import < useState, useEffect, useRef >from "react"; const useInterval = (callback: () => void, delay: number | null) => < const savedCallback = useRefvoid>(); useEffect(() => < savedCallback.current = callback; >, [callback]); useEffect(() => < function tick() < savedCallback.current && savedCallback.current(); >if (delay !== null && delay > 0) < let delay); return () =>clearInterval(id); > else < tick(); >>, [delay]); >;

        Можно использовать этот хук следующим образом:

        const [count, setCount] = useState(0); useInterval(() => < setCount(count + 1); >, 1000);

        4. Хук useDebounce

        Теперь мы поговорим о хуке, который выполняет функцию только после того, как пройдет определенное количество времени без ее вызова. Это полезно, например, для ограничения скорости вызовов API или обновления состояния при изменении ввода, например, когда вы набираете текст в поисковой строке.

        import < useEffect, useRef >from 'react'; export function useDebounce(callback:Function, timeout: number = 200, deps: Array = []) < const data = useRef(< firstTime: true >); useEffect(() => < const < firstTime, clearFunc >= data.current; const handler = setTimeout(() => < if (clearFunc && typeof clearFunc === 'function') < clearFunc(); >data.current.clearFunc = callback(); >, timeout); return () => < clearTimeout(handler); >; >, [timeout, . deps]); > export default useDebounce;
        const [inputValue, setInputValue] = useState(""); useDebounce(() => < // вызов APIl >, 500);

        5️. Хук useThrottle

        Throttle означает, что функция будет выполняться один раз за каждый заданный промежуток времени. Это может быть полезно для предотвращения быстрого запуска слишком большого количества вызовов API или событий.

        import < useEffect, useRef >from 'react'; export const useThrottle = (callback:Function, delay: number = 200, deps: Array = []) => < const lastRan = useRef(Date.now()); useEffect( () =>< const handler = setTimeout(function() < if (Date.now() - lastRan.current >= delay) < callback(); lastRan.current = Date.now(); >>, delay - (Date.now() - lastRan.current)); return () => < clearTimeout(handler); >; >, [delay, . deps], ); >; export default useThrottle;
        const [inputValue, setInputValue] = useState(""); useThrottle(() => < // вызов API >, 500);

        Еще больше крутых хуков вы можете найти в каталоге хуков.

        React Js. Как передать данные от одного компонента к другомy?

        Прошу не судить меня строго. React начал изучать недавно. Есть знания по JS, которые хочу научиться применять . Большая часть кода взята с урока. Я пытаюсь дописать компоненту поиска, чтобы при вводе в строку поиска оставались только нужные мне заметки. Но уже 3 день подряд не получается - не могу передать данные из компонента Search в компонент NotesApp в notes. Пытаюсь это сделать при помощи props - задаю в > Выдаёт ошибку ( Unknown prop transfer on tag ). Также пытался передать в , но тоже безрезультатно. Подскажите в чём ошибка или хотя путь в каком двигаться ? Заранее , благодарен. Полный код вот здесь https://github.com/VadoSevich/React-MyPractice-/blob/master/React%234/note.js

         var Search = React.createClass(< getInitialState: function()< return < searchValue: '' >; >, handleSearch: function(event) < var searchQuery = event.target.value.toLowerCase(); var searchNotes = this.props.notes.filter(function(el) < var searchValue = el.text.toLowerCase(); return searchValue.indexOf(searchQuery) !== -1; >); this.setState(< searchValue: searchNotes >); >, render: function() < return ( transfer=/> ); > >); var NotesApp = React.createClass( < getInitialState: function()< return < notes: [] >>, componentDidMount: function()< var localNotes = JSON.parse(localStorage.getItem('notes')); if (localNotes) < this.setState(< notes: localNotes>); > >, componentDidUpdate: function()< this._updateLocalStorage(); >, handleNodeDelete: function(note)< var noteId = note.id; var newNotes = this.state.notes.filter(function(note)< return note.id !== noteId; >); this.setState(< notes: newNotes >); >, handleNodeAdd: function(newNote)< var newNotes = this.state.notes.slice(); newNotes.unshift(newNote); this.setState(); >, _updateLocalStorage: function() < var notes = JSON.stringify(this.state.notes); localStorage.setItem('notes', notes) >, render: function() < return ( 

        NotesApp

        /> /> onNoteDelete=/>
        ); > >); ReactDOM.render( , document.getElementById("mount-point") );

        Отслеживать

        36.1k 2 2 золотых знака 56 56 серебряных знаков 83 83 бронзовых знака

        задан 13 окт 2016 в 22:51

        Vadym Checherinda Vadym Checherinda

        31 1 1 золотой знак 1 1 серебряный знак 3 3 бронзовых знака

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *