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

Question

У меня есть родительский компонент C, и у него два потомка A и B. Предположим, у меня есть некоторые данные после вычисления в компоненте B, который я хочу передать непосредственно компоненту Aбез использования родительского компонента C.

Как я могу это сделать и сколько способов сделать это?Помогает ли здесь редукция или контекстный API?

Answer 1

Если вы не хотите поднимать свое состояние до родительского, тогда и redux, или Context API - хороший вариант, однако, если вы не используете redux уже в своем проекте, я быПредлагаем попробовать использовать Context API,

• . Редукс поставляется с большим количеством стандартного кода, использование избыточности только для двух компонентов - излишество.
• Хранилище резервов является глобальным для вашего проекта, если выЕсли вы хотите обмениваться данными между двумя братьями и сестрами с помощью Context API, вы можете просто обернуть их с помощью Context Provider

Answer 2

Да, вы можете использовать здесь избыточность для связи с компонентом А без использования родительского компонента.Передайте данные из компонента B создателю действия, который затем отправит действие редуктору.Редуктор вернет состояние (которое теперь содержит данные), к которому вы можете получить доступ из компонента A. Вам нужно будет подключить оба A & B к хранилищу редуксов.

Предположим, вам нужны «данные», которые у вас естьв компоненте A также должен быть доступен в компоненте B.

class A extends React.Component{
  //call this.props.actionCreator and pass it the data
}
export default connect(null, actionCreators)(A)

Создатель действия получает данные, упаковывает их в действие и отправляет редуктору.Редуктор возвращает данные, которые становятся частью состояния.

class B extends React.Component{
  //We can access data as this.props.data here
}
function mapDispatchToProps(state) {
   return {data: state.LoginReducer.data};
}
export default connect(mapDispatchToProps, actionCreators)(B)

Затем мы указываем, какой фрагмент состояния мы хотим в mapDispatchToProps, и передаем его помощнику подключения.Помощник подключения делает данные доступными как this.props.data внутри компонента B.

Надеюсь, я объяснил это достаточно хорошо.