VDS за 300р от нашего партнера SpaceWeb
[4]
23 Июн 2020, 10:10

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

React — это библиотека JavaScript, созданная Facebook. Обработка данных в React может быть немного сложнее, но не так сложно, как это может показаться. В настоящее время я собрал три метода обработки данных в React :-

  1. От родителя к ребенку с помощью реквизита
  2. От ребенка к родителю с помощью обратных вызовов
  3. Между братьями и сестрами:
    (i) объединить выше два метода
    (ii) с использованием Redux
    (iii) с помощью React’S Context API

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

От родителя к ребенку с помощью реквизита

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


App ─ ─ ─ Parent
├──
Child1 ─ ─ ─ Child2

Это самое простое направление потока данных в React и самое основное.

класс родитель расширяет реагировать.Компонент { state = { data : "Hello World"} 
render() {

return (
<div><div>
<Child1/> / / нет данных для отправки <Child1/>
государство.данные} / > >
< / div>< / div>
);
}
}
/ /нет необходимости использовать данные для отправки в качестве состояния, простые переменные vars или const могут также использоваться для отправки данных от родителя к потомку.

Просто, используйте это.реквизит.dataFromParent (просто переменная, используемая для отправки реквизитов) для доступа к данным, отправленным от родителя к потомку.

класс Child2 расширяет React.Компонент { 
render () {

return (
<div><div>
данные от родителя: {this.реквизит.dataFromParent}
< / div > < / div>
);
}
}

От ребенка к родителю с помощью обратных вызовов

Давайте предположим, что мне нужно отправить сообщение от Child1 к Parent “ » Эй, Попси, как это происходит?”. Для этого мне нужно выполнить ряд шагов.

Шаг 1: Определите функцию обратного вызова, которая принимает параметр, к которому мы рассматриваем доступ из дочернего элемента в Родительском.JS
Шаг 2: Кроме того, отправьте определенную функцию обратного вызова в качестве реквизитов к Child1.JS

класс родитель расширяет реагировать.Компонент { state = { message:""} callbackFunction = (childData) => {> this.setState ({message: childData}) }, render () { 
return (
<div><div>
callbackFunction} / >>
<p > {это.государство.сообщение} < / p > </p>
< / div>< / div>
);
}
}

Шаг 3: В Child1.js отправляет данные, используя это.реквизит.обратный вызов (dataToParent)

класс Child1 расширяет React.Компонент{ sendData = () = > {> 
this.реквизит.parentCallback ("Эй, Попси, как дела?");
},
render () {
//вы можете вызвать функцию sendData всякий раз, когда вы хотите отправить данные из дочернего компонента в родительский компонент.
}
};

Между Братьями И Сестрами

Когда я был новичком, мне было трудно решить, какой метод выбрать для обмена данными между братьями и сестрами, есть три метода, известные мне еще для обмена данными между братьями и сестрами, и все они имеют свои собственные преимущества и недостатки.
Метод 1: объедините два вышеупомянутых метода совместного использования данных.
Однако этот метод не будет работать для сложных структур каталогов, так как придется писать большие биты кода для отправки данных между компонентами на дальних уровнях друг от друга. Данные, то придется толкать и тянуть через каждый средний уровень.

Метод 2: Используйте глобальное хранилище, поддерживающее состояния всех дочерних компонентов, которые необходимы для взаимодействия и использования данных, требуемых от хранилища-Redux

Метод 3: используйте API контекста React
есть тонны статей и блогов уже о том, почему React обновлен до API контекста и какой из них лучше в каких терминах, эти две статьи помогут понять все это:

React Context API-это замена для Redux?

Преобразуйте приложение React, которое использует Redux для управления состоянием, чтобы использовать новый API контекста React

blog.bitsrc.io

 

Возможно, Вам Не Потребуется Переделывать

Люди часто выбирают Redux, прежде чем им это нужно. “Что делать, если наше приложение не масштабируется без него?»Позже разработчики хмурятся…

medium.com

Я использовал этот метод и уже имею небольшую склонность к использованию этого над Redux.

Главное преимущество Context API заключается в том, что он избавляет разработчика от необходимости бурить буровые установки.(Prop-бурение относится к методу передачи переменных вниз на субкомпоненты. Основная идея заключается в функциональном программировании, где вы передаете параметры следующей функции и так далее)

Источник изображения: Google

Рассмотрим структуру каталогов и нам нужно передать данные между Child1 и Child2. [ Child1 должен отправить сообщение — » SSup брат??” to Child2 ]
мы реализуем это в следующем методе с помощью Context API:

Приложение 
─ ─ ─
Child1 ─ ─ ─ Child2

Шаг 1: Создайте компонент поставщика для двух дочерних элементов.
Этот поставщик поддерживает состояние (данные, используемые обоими компонентами и некоторые обратные вызовы, используемые для управления состояниями) и возвращает contextObject.Компонент провайдера JSX )

Шаг 2: передайте состояние и функцию обратного вызова в качестве реквизитов всем дочерним элементам внутри компонента Provider.

экспорт const MContext = реагировать.createContext (); / / exporting context object class MyProvider расширяет компонент { state = {message: ""} render () { return ( Значение поставщика={ { состояние: это.state, setMessage: (value) => this.setState ({ message: value })}} > > {это.реквизит.children} / /это означает, что глобальный магазин доступен для всех дочерних тегов с MyProvider в качестве родителяПровайдер>)>}}

Поставщик является боссом для своих дочерних элементов (глобальное хранилище всех состояний и функций обратного вызова для управления этими состояниями). Если кому-то что-то нужно, он должен сначала связаться с поставщиком, чтобы получить доступ к объектам.

(a) чтобы установить или управлять сообщением Child1, он должен получить доступ к поставщику и установить состояния поставщика.

(b) для просмотра/доступа к данным Child2, он должен получить доступ к провайдеру, чтобы получить государства.

Шаг 3: Используйте компонент MyProvider в качестве родителя для двух дочерних элементов-Child1, Child2.

класс приложение расширяет реагировать.Компонент {рендер() {
возвращение (
<div>
<MyProvider>
<div className="App"> <Child1 /> <Child2 /> </div> </MyProvider> </div>
);
}
}

Шаг 4: реализовать желаемый результат таким же образом, но на этот раз, используя ContextObject.Потребитель как поясняется ниже:
и дети — Child1 и Child2 являются потребителями поставщика. Отныне они получают доступ к поставщику в рамках потребительских тегов.

импорт MContext 
класс Child1 расширяет реагировать.Компонент {
render () { return ( <div><div> Потребитель> > {(контекст) = > (><кнопка onClick={()=>{контекст.setMessage ("новое прибытие")}} > отправить>< / button>< / button>)}Потребитель>> < / div > < / div>)}}

Как Child2 получает эти данные сейчас?
Просто, получая доступ к поставщику в пределах потребительских тегов.

импорт 
класса MContext Child2 расширяет React.Компонент {
render () { return ( <div><div> Потребитель> > {(контекст) = > (><p>{context.государство.сообщение}}< / p>)}</p> Потребитель>> < / div > < / div>)}}

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

Комментарии (0)

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

Войдите, чтобы написать о чем-нибудь...
Вход Регистрация
Web.onRails
Здесь вы можете спросить или написать обо всём, что касается Веб-разработки.
написать о чем-нибудь...
Метки:
Лучшее
[52]
16 Окт 2011, 15:38
Вывести все элементы POST
[просмотров 11580]
[74]
31 мая 2011, 11:48
Python проверка существования переменной
[просмотров 8276]
[4]
10 Окт 2018, 15:33
Как запретить просмотр сайта по IP?
[просмотров 8249]
[100]
19 Дек 2014, 16:16
User-agent для Internet Explorer 11
[просмотров 6616]
[124]
21 Июл 2011, 14:04
Python Imaging Library (PIL)
[просмотров 6352]
[58]
29 мая 2012, 12:08
Узнать версию PHP из командной строки
[просмотров 4662]
[315]
16 Июл 2011, 20:03
Python работа с MySQL
[просмотров 4586]

Вести с Хабра