В этом посте я познакомлю вас с практическим сценарием, в котором родительский компонент (ListBox) взаимодействует с дочерним компонентом (AlertComponent) с использованием реквизита и обратных вызовов.

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

Давайте разберемся на этом примере:

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

Вот структура взаимодействия:

1. ListBox (Родительский) отображает элементы и передает необходимые реквизиты и обратные вызовы в AlertComponent (Дочерний).

import React, { useState } from 'react';
import AlertComponent from './AlertComponent';

const ListBox = () => {
  const [showComponent, setShowComponent] = useState(false);

  const alertAction = async () => {
    setShowComponent(!showComponent);
  };

  return (
    

      

        
Item 1
        {/* Other list items */}
      

      {/* Passing props to the child component */}
       {
          alert('Item Deleted');
          setShowComponent(false);
        }}
        onCancel={() => setShowComponent(false)}
        showComponent={alertAction}

      />
    
  );
};

export default ListBox;

1. AlertComponent принимает такие реквизиты, как заголовок, описание и обратные вызовы, такие как onAccept, onCancel, а также реквизит, изменяющий состояние showComponent.

export const AlertComponent: = ({ title, description, 
onAccept, onCancel, showComponent }) => {
return (
... rest of the code
)
}

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

showComponent работает как обратный вызов, поскольку поддерживает состояние, отвечающее за отображение/скрытие AlertComponent

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

 {
          alert('Item Deleted');
          setShowComponent(false);
        }}
        onCancel={() => setShowComponent(false)}
        showComponent={alertAction}
      />

Использование props и обратных вызовов таким образом обеспечивает четкий поток данных между родительским и дочерним компонентами в React.

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

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

Продолжайте строить!