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

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

  • автор:

Як передавати дані та події між компонентами в React

Ihor Zakatsiura Перекладач: Ihor Zakatsiura Nishant Kumar Автор: Nishant Kumar (Англійська)

Як передавати дані та події між компонентами в React

Якщо ви спробуєте реалізувати операції CRUD (тобто чотири базові функції: створення, читання, оновлення та видалення) за допомогою кінцевих точок API, то ви можете виявити, що керувати даними в кількох компонентах дещо важко.

Або, можливо, у вас є модальний компонент, але ви хочете запустити його з іншого компоненту.

Розібратися, як впоратися з цими сценаріями, може бути важко.

У цій публікації я покажу, як ви можете це зробити.

Як передати дані між батьківським та дочірнім компонентом

Спершу давайте передамо дані між батьківським і дочірнім компонентами.

Спочатку вам потрібно буде створити два компоненти, один батьківський і один дочірній.

Screenshot-2021-06-06-132836

Коли ми натискаємо на кнопку Click Parent , ми побачимо виведені дані на екрані.

import React from 'react' import Child from './Child'; import < Button >from 'semantic-ui-react'; import < useState >from 'react'; import './App.css'; export default function Parent() < const [data, setData] = useState(''); const parentToChild = () => < setData("This is data from Parent Component to the Child Component."); >return ( 
/>
) >

Вище ви бачите повний код для Parent Component .

Як передати дані між дочірнім та батьківським компонентом

Це дещо складніше.

Спершу вам потрібно створити функцію в батьківському компоненті під назвою childToParent і порожній стан під назвою data .

Screenshot-2021-06-06-134803

Тепер ви можете передавати дані від дочірнього компоненту до батьківського і від батьківського до дочірнього як професіонал.

Ви також можете передавати такі події, як onClick або OnChange

Просто викличте метод alert у функції childToParent і передайте цю функцію як пропс дочірньому компоненту.

Screenshot-2021-06-06-140405

Ви можете знайти код на Github, якщо бажаєте експериментувати далі.

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

Я не понимаю как мне правильно взять из NavigationBar значение, которое было введено в input , и передать его в SearchLine ?

Отслеживать
14k 13 13 золотых знаков 38 38 серебряных знаков 63 63 бронзовых знака
задан 22 апр 2019 в 23:52
user730720 user730720
11 1 1 серебряный знак 3 3 бронзовых знака

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Без Redux можно пойти путем передачи значения через props . Добавить в стейт базового компонента переменную, куда будем сохранять значение, а также добавить метод, который будет записывать это значение. Передадим значение через пропсу в MainComponent , а метод записи значения передадим через пропсу в NavigationBar . Получим что-то вроде следующего кода:

class BaseComponent extends React.Component < constructor(props) < super(props); this.state = < artName: '' >; // переменная, в которой будем хранить значение this.onChangeArtValue = this.onChangeArtValue.bind(this); > onChangeArtValue(value) < this.setState(< artName: value >); > render() < return( <> /> /> ); > > 

Далее перейдем в компонента NavigationBar и испольуем переданный через props метод внутри ранее написанного handleChange метода:

handleChange(e) < this.props.onChangeArtValue(e.target.value); // вызвали метод переданный через пропсу >

Теперь при изменении значения внутри инпута в NavigationBar компоненте, будет меняться значение в стейте BaseComponent компонента. Оно же при изменении будет пробрасываться в MainComponent компонент и вызывать ререндеринг. Осталось внести правки в сам MainComponent компонент. Нам нужно написать вспомогательный метод для Route , чтобы правильно передать пропсу в компонент:

class MainComponent extends React.Component < constructor(props) < super(props); this.renderSearchLine = this.renderSearchLine.bind(this); >renderSearchLine() < // возвращаем SearchLine с переданной пропсой return ( /> ); > render() < return( <>  />    ); > > 

Можно не выделять отдельный метод, но я сделал для наглядного понимания отдельный метод. После этого, внутри компонента SearchLine появится пропса artName , для этого будет достаточно обратиться в пропсы, для получения ее значения: this.props.artName . То есть, логика передачи через пропсы достаточно прямолинейна и ясна.

Если данный подход покажется слишком громоздким, то советую обратить внимание на одну очень полезную штуковину под названием Redux.

Основы Reactjs: отображение и передача данных

Привет Хабр! Сегодня поговорим про основы React: отображение данных в React и передачу данных через props.

Начнем с отображения данных

Компоненты React проявляют себя лучше всего, когда говорят: «Дайте мне данные, и я их нарисую». В этом сценарии мы будем практиковаться в отображении данных, о которых знает компонент. Данные ”отрисовывания” на веб-странице будут включать интерполяцию. Это просто означает получение значения переменной, преобразование его в строку и размещение его в HTML, чтобы веб-страница отобразила его.

Но иногда это немного сложнее; что, если мы хотим отобразить данные в массиве? Что, если мы хотим условно отобразить что-то? К счастью, есть способы сделать обе эти вещи. Давайте взглянем.

Мы получаем данные, интерполируя их. В React это делается с помощью фигурных скобок: <> . Давайте сделаем это в People.js , где мы уже настроились на чтение списка людей из жестко запрограммированных данных.

Создадим и отредактируем src/People.js :

export function People() < const people = [ < id: 135, first: 'Phoebe', last: 'Buffay', image: '/images/pbuffay.jpg', notes: 'Guitarist. Surrogate mom. Has a smelly cat.' >, < id: 225, first: 'Ross', last: 'Geller', image: '/images/rgeller.jpg', notes: 'PhD in Paleontology' >, < id: 1043, first: 'Chandler', last: 'Bing', image: '', notes: 'No one is certain what he does for a living. Could he BE more sarcastic?' >, < id: 17, first: 'Rachel', last: 'Green', image: '/images/rgreen.jpg', notes: 'Fashion designer' >, ] return ( <> 
first

Firstname Lastname

Notes

) >
const person = people[0];

А теперь давайте отобразим имя этого человека. Измените

с

Firstname Lastname

на

Если вы обновите браузер, увидите данные для имени первого человека. Выражения были интерполированы, чтобы показать данные.

Теперь попытаемся сделать то же самое для person.notes и person.image . (Подсказка: используйте свойство src элемента .) Вы поймете, что все сделали правильно, когда обновите вкладку браузера и увидите человека.

Как только вы получите это отображение, давайте поднимем его на ступеньку выше.

Отображение нескольких вещей

Теперь мы можем отображать данные из одного объекта, но как отобразить несколько объектов, например, в массиве?

Мы будем перебирать массив, используя метод JavaScript Array.map() . В IDE найдем единственный , где отрисовываем одного человека. Обернем это выражением JavaScript следующим образом:

Другими словами, помещаем это в строку над

и закрываем его ниже этого

:

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

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

Мы научились отображать данные, как отдельные объекты, так и массивы. Но как мы рисуем вещи условно? Что делать, если нет образа для нашего человека? Может быть, мы вообще не рисуем картину. Давайте попробуем сделать так, чтобы это произошло.

Будем снова использовать выражения в нашем JSX. Помните, что это фигурные скобки ( <> ). В выражение мы поместим условное выражение.

Находим в нашем коде. И делаем его частью условного выражения:

Тем самым говорим: «Если у человека есть изображение, покажите ».

Другим вариантом было бы использование:

/> : null>

В котором говорится: «Если у человека есть изображение, покажите . В противном случае покажите ноль».

Теперь посмотрим как передать данные между двумя компонентами

Обычно создается компонент React с данными, а затем эти данные передаются в подкомпонент. Например, у вас есть список «виджетов» на более высоком уровне и вы создаете компонент для отображения каждого из них. Что ж, вам нужно передать эти данные «виджета» из родительского списка в дочерний, верно?

Давайте попрактикуемся в этом сценарии. У нас будет список людей в App.js , мы передадим его компоненту , а затем пройдемся по компоненту , чтобы нарисовать каждого человека.

Переключаемся на вкладку IDE и смотрим на src/App.js , вы увидите, что у нас есть множество людей.

import './App.css'; import < People >from './People' function App() < const people = [ < id: 135, first: 'Phoebe', last: 'Buffay', image: '/images/pbuffay.jpg', notes: 'Guitarist. Surrogate mom. Has a smelly cat.' >, < id: 225, first: 'Ross', last: 'Geller', image: '/images/rgeller.jpg', notes: 'PhD in Paleontology' >, < id: 1043, first: 'Chandler', last: 'Bing', image: '/images/cbing.png', notes: 'No one is certain what he does for a living. Could he BE more sarcastic?' >, < id: 17, first: 'Rachel', last: 'Green', image: '/images/rgreen.jpg', notes: 'Fashion designer' >, ] return ( <> 
); > export default App;

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

Мы собираемся изменить src/People.js для получения props .

import < Person >from './Person'; let people; // Just to prevent a compile error. Feel free to remove it eventually. export function People() < return ( <>

All the people

)>
)>
) >

Видите старое определение функции? Измените это:

export function People()

export function People(props)

Мы просто готовим его к получению props от родителя. Затем вытащим людей из объекта props . Добавим это внутрь функции People :

Далее редактируем src/App.js и находим, где мы размещаем компонент :

Так мы говорим: «Дайте мне компонент и установите его свойство people в мою переменную people ».

Когда вы обновите свой браузер, должны увидеть список имен людей вверху.

Теперь давайте пройдем еще один уровень

People.js уже видит всех людей. Но каждому отдельному экземпляру компонента Person нужен объект person .

В IDE отредактируйте src/People.js и найдите, где мы включаем . Измените его, чтобы передать человека в качестве props :

Теперь мы редактируем дочерний файл src/Person.js . Обратите внимание, как мы пытаемся показать детали для одного человека.

Меняем объявление функции следующим образом: export function Person()

export function Person(props)

Затем просто вытащите человека из props вот так:

let person = props.person;

Если вы обновите браузер, должны увидеть четырех человек с изображениями и информацией:

Каждый хороший разработчик должен думать о качестве кода и удобстве его использования. Особенно это важно, если вашим кодом будут пользоваться другие разработчики, например, если вы пишете библиотеку компонентов. В этом случае особенно важным становится вопрос контроля и расширяемости. В поисках этого идеального компонента сообщество React разработало несколько классных паттернов, которые вы должны взять на вооружение. Все они так или иначе позволяют разработчику вмешиваться в работу компонента и настраивать или модифицировать его под свои нужды. Хочу порекомендовать вам бесплатный вебинар, в рамках которого эксперты Otus познакомят вас с основными паттернами, которые часто встречаются на практике, а также покажут их применение.

  • Блог компании OTUS
  • ReactJS

Передача данных между компонентами в 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 другому компоненту.

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

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