От родительского компонента к дочернему компоненту (с использованием свойств)

С помощью реквизита мы можем отправлять данные от родителя к дочернему компоненту.
Как мы это делаем?

Рассмотрите следующий родительский компонент:

import ChildComponent from "./Child";

    function ParentComponent(props) {
     let [counter, setCounter] = useState(0);
    
     let increment = () => setCounter(++counter);
    
     return (
       <div>
         <button onClick={increment}>Increment Counter</button>
         <ChildComponent counterValue={counter} />
       </div>
     );
    }

Как видно из приведенного выше кода, мы визуализируем дочерний компонент внутри родительского компонента, предоставляя реквизит с именем counterValue. Значение счетчика передается от родительского к дочернему компоненту.

Мы можем использовать данные, переданные родительским компонентом, следующим образом:

function ChildComponent(props) {
 return (
   <div>
     <p>Value of counter: {props.counterValue}</p>
   </div>
 );
}

Мы используем props.counterValue для отображения данных, переданных родительским компонентом.

От дочернего компонента к родительскому компоненту (с использованием обратных вызовов)

Это немного сложно. Мы можем выполнить это шаг за шагом:

  • Шаг 1: Создайте обратный вызов в родительском компоненте, который принимает данные, необходимые в качестве параметра.
  • Шаг 2: Передайте этот обратный вызов в качестве реквизита дочернему компоненту.
  • Шаг 3. Отправьте данные из дочернего компонента с помощью обратного вызова.

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

Шаг 1 и шаг 2: Создайте обратный вызов в родительском компоненте, передайте этот обратный вызов как свойство.

function ParentComponent(props) {
 let [counter, setCounter] = useState(0);

 let callback = valueFromChild => setCounter(valueFromChild);

 return (
   <div>
     <p>Value of counter: {counter}</p>
     <ChildComponent callbackFunc={callback} counterValue={counter} />
   </div>
 );
}

Выше кода мы создали функцию обратный вызов, которая принимает данные, полученные от дочернего компонента, в качестве параметра.
Затем мы передали функцию обратный вызов в качестве параметра. prop для дочернего компонента.

Шаг 3. Передайте данные из дочернего компонента в родительский.

function ChildComponent(props) {
 let childCounterValue = props.counterValue;

 return (
   <div>
     <button onClick={() => props.callbackFunc(++childCounterValue)}>
       Increment Counter
     </button>
   </div>
 );
}

В приведенном выше коде мы использовали props.counterValue и установили его в переменную с именем childCounterValue.
Затем, при нажатии кнопки, мы передаем увеличенный childCounterValue в props.callbackFunc.

Вывод:

1. Используя props, мы можемпередавать данные отродителя к дочернему компоненту.

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