Передача данных между компонентами в React
В реакте поток данных — однонаправленный. Это значит что данные передаются как водопад, сверху вниз, от родителя к ребенку, через props. Что такое props? Это неизменяемый объект, предназначенный только для чтения. Проще понять если думать о компонентах, как о функциях(а они по сути ими и являются), props—это просто аргумент функции, с которым мы можем работать внутри, но не изменять.
Родитель ➡️ Ребенок — используй Props
Это самый простой способ передачи данных.
1. В родительском компоненте передаём данные из стейта в дочерний.
<ChildComponent name={this.state.name} />2. В дочернем принимаем и выводим.
<p>Props: {this.props.name}</p>Родитель ⬅️ Ребенок — используй Callback
Эта передача данных напоминает мне бумеранг, есть точка старта — это наш родительский компонент, есть точка максимального отдаления — это дочерний компонент. И есть наш инструмент —бумеранг, в реакте это будет функция, которая находится в родителе и передаётся через props в ребенка, где и вызывается.
1. Создаём в родителе функцию updateData. У неё есть входной параметр value, этот параметр мы присваиваем в стейт нашего компонента, с помощью функции setState. Бумеранг готов!
updateData = (value) => { this.setState({ name: value })}
2. Передаём в дочерний элемент через props функцию updateData. Мы запустили бумеранг :)
<ChildComponent updateData={this.updateData} />3. В дочернем элементе я создала кнопку, при клике на неё будет вызываться функция, которую мы передавали с помощью props. Ей передается новый параметр для текста, именно его мы хотим передать в родителя. Бумеранг возвращается назад.
<button onClick={() => { this.props.updateData(this.state.name)}}>Запустить бумеранг</button>Ребенок ➡️ Ребенок—используй родителя.
Для того чтобы передать данные между соседними компонентами, нужно использовать посредника—их родителя. Сначала нужно передать данные от ребенка к родителю как аргумент коллбека. Потом присвоить эти данные в стейт родителя и передать через props другому компоненту.
При создании вдохновлялась статьей: https://medium.com/@ruthmpardee/passing-data-between-react-components-103ad82ebd17
