Моя структура выглядит следующим образом:
Component 1
- |- Component 2
- - |- Component 4
- - - |- Component 5
Component 3
Компонент 3 должен отображать некоторые данные в зависимости от состояния Компонента 5. Поскольку реквизиты являются неизменяемыми, я не могу просто сохранить его состояние в Компоненте 1 и переслать его, верно? И да, я читал о редуксе, но не хочу им пользоваться. Я надеюсь, что это можно решить просто с помощью реакции. Я ошибся?
<MyChildComponent setState={(s,c)=>{this.setState(s, c)}} />
если вы собираетесь использовать этот хак, убедитесь, что вы поддерживаете обратный вызов.this.setState(p)
? Я пытался без них, и это, кажется, работает (я очень новичок в React)Ответы:
Для связи ребенок-родитель вы должны передать функцию, устанавливающую состояние от родителя к ребенку, например
Таким образом, ребенок может обновить состояние родителя с помощью вызова функции, переданной с помощью реквизита.
Но вам придется переосмыслить структуру ваших компонентов, потому что, как я понимаю, компоненты 5 и 3 не связаны между собой.
Одно из возможных решений - заключить их в компонент более высокого уровня, который будет содержать состояние обоих компонентов 1 и 3. Этот компонент будет устанавливать состояние более низкого уровня с помощью подпорок.
источник
this.handler = this.handler.bind(this)
конструктор,this
внутриhandler
функции будет указана функция замыкания, а не класс. Если вы не хотите связывать все свои функции в конструкторе, есть еще два способа справиться с этим, используя функции стрелок. Вы можете просто написать обработчик кликов какonClick={()=> this.setState(...)}
, или вы можете использовать инициализаторы свойств вместе с функциями стрелок, как описано здесь babeljs.io/blog/2015/06/07/react-on-es6-plus в разделе «Функции стрелок»Я нашел следующее рабочее решение для передачи аргумента функции onClick от дочернего к родительскому компоненту:
Версия с передачей метода ()
Посмотрите на JSFIDDLE
Версия с передачей функции Arrow
Посмотрите на JSFIDDLE
источник
<ChildB handleToUpdate = {handleToUpdate.bind(this)} />
почему пришлось связывать снова?this
вызове внутри дочернего элементаthis
относилось к состоянию родителя, а не к дочернему состоянию. Это закрытие во всей красе!Я хочу поблагодарить наиболее одобренный ответ за то, что он дал мне представление о моей собственной проблеме, в основном, о ее изменении с помощью функции стрелки и передачи параметра из дочернего компонента:
Надеюсь, это кому-нибудь поможет.
источник
this
in in arrow относятся к контексту родителя (т.е.Parent
классу).Мне нравится ответ относительно передачи функций, это очень удобная техника.
С другой стороны, вы также можете достичь этого с помощью pub / sub или с помощью варианта диспетчера, как это делает Flux . Теория очень проста: компонент 5 отправляет сообщение, которое ожидает компонент 3. Компонент 3 затем обновляет свое состояние, которое запускает повторную визуализацию. Это требует компонентов с состоянием, которые, в зависимости от вашей точки зрения, могут быть или не быть анти-паттерном. Я против них лично и предпочел бы, чтобы что-то еще слушало рассылки и изменяло состояние с самого начала (Redux делает это, но добавляет дополнительную терминологию).
Распределитель связывает с Flux очень просто, он просто регистрирует обратные вызовы и вызывает их, когда происходит любая диспетчеризация, проходя через содержимое диспетчеризации (в приведенном выше кратком примере
payload
с диспетчеризацией нет, просто идентификатор сообщения). Вы можете очень легко адаптировать это к традиционному pub / sub (например, используя EventEmitter из событий или другую версию), если это имеет для вас больше смысла.источник
var Dispatcher = require( 'flux' ).Dispatcher
Я нашел следующее рабочее решение для передачи аргумента функции onClick от дочернего к родительскому компоненту с параметром:
родительский класс:
детский класс:
источник
param1
это просто отображение на консоли, а не назначение ему всегда назначаетсяtrue
Если вам когда-нибудь понадобится общаться между ребенком и родителем на любом уровне ниже, тогда лучше использовать контекст . В родительском компоненте определите контекст, который может вызываться дочерним элементом, например
Вы можете найти демо-проект в репо
источник
Кажется, что мы можем только передавать данные от родителя к потомку, так как реагирует, продвигает однонаправленный поток данных, но чтобы самому обновлять родительский элемент, когда что-то происходит в его «дочернем компоненте», мы обычно используем то, что называется «функцией обратного вызова».
В этом примере мы можем передать данные из SubChild -> Child -> Parent, передав функцию ее непосредственному Child.
источник
Я использовал ответ с этой страницей с самым высоким рейтингом много раз, но изучая React, я нашел лучший способ сделать это, без привязки и без встроенной функции внутри подпорок.
Просто посмотрите здесь:
Ключ находится в функции стрелки:
Вы можете прочитать больше здесь . Надеюсь это кому-нибудь пригодится =)
источник
-Мы можем создать ParentComponent и с помощью метода handleInputChange обновить состояние ParentComponent. Импортируйте ChildComponent, и мы передаем два реквизита от родительского к дочернему компоненту, т.е. функции и count.handleInputChange.
Теперь мы создаем файл ChildComponent и сохраняем как ChildComponent.jsx. Этот компонент не имеет состояния, потому что дочерний компонент не имеет состояния. Мы используем библиотеку prop-types для проверки типов реквизита.
источник
Если этот сценарий не распространяется повсеместно, вы можете использовать контекст React, особенно если вы не хотите вводить все накладные расходы, которые представляют библиотеки управления состоянием. Кроме того, легче учиться. Но будьте осторожны, вы можете злоупотребить этим и начать писать плохой код. По сути, вы определяете компонент Контейнер (который будет хранить и сохранять этот фрагмент состояния для вас), делая все компоненты, заинтересованные в записи / чтении этого фрагмента данных, его дочерними (не обязательно прямыми дочерними).
https://reactjs.org/docs/context.html
Вместо этого вы также можете использовать обычный React.
передать doSomethingAbout5 до компонента 1
Если это обычная проблема, вы должны начать думать о переносе всего состояния приложения в другое место. У вас есть несколько вариантов, наиболее распространенными из которых являются:
https://redux.js.org/
https://facebook.github.io/flux/
По сути, вместо управления состоянием приложения в вашем компоненте вы отправляете команды, когда что-то происходит для обновления состояния. Компоненты также извлекают состояние из этого контейнера, поэтому все данные централизованы. Это не значит, что я больше не могу использовать локальное состояние, но это более сложная тема.
источник
Итак, если вы хотите обновить родительский компонент,
Здесь onChange является атрибутом с методом «обработчик», связанным с его экземпляром. мы передали обработчик метода компоненту класса Child, чтобы получить через свойство onChange его аргумент props.
Атрибут onChange будет установлен в объекте props следующим образом:
и передается дочернему компоненту
Таким образом, дочерний компонент может получить доступ к значению имени в объекте props, как этот props.onChange
Это делается с помощью реквизита рендера.
Теперь у дочернего компонента есть кнопка «Click» с событием onclick, установленным для вызова метода-обработчика, переданного ему через onChnge в его объекте аргумента props. Так что теперь this.props.onChange в Child содержит метод вывода в родительском классе Reference и кредиты: биты и кусочки
источник
Вот как я это делаю.
источник
Большинство ответов, приведенных выше, относятся к проектам на основе React.Component. Если вы используете
useState
в последних обновлениях библиотеки React, следуйте этому ответуисточник
источник