От родительского компонента к дочернему компоненту (с использованием свойств)
С помощью реквизита мы можем отправлять данные от родителя к дочернему компоненту.
Как мы это делаем?
Рассмотрите следующий родительский компонент:
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. Используя Обратный вызов, мы можем передавать данные от дочернего компонента к родительскому.