Хук контекста useContext в React
В этом уроке мы продолжим работу с
контекстом. Теперь построим дерево
компонентов. Для начала в отдельном
файле создадим React компонент
BigBox:
function BigBox() {
return (
<p>bigbox</p>
);
}
Импортируем его и разместим в нашем
главном компоненте App:
import BigBox from './BigBox';
function App() {
return (
<BigBox />
);
}
Для большей наглядности немного
стилизуем
дивы. Для этого создадим файл
styles.css:
div {
border: 1px solid blue;
margin: 10px;
text-align: center;
max-width: 300px;
}
Не забудем импортировать его
в App.js:
import './styles.css';
Теперь в отдельном файле создадим
компонент MiddleBox:
function MiddleBox() {
return (
<p>middlebox</p>
);
}
И положим его в большую
коробку BigBox:
import MiddleBox from './MiddleBox';
function BigBox() {
return (
<div>
<MiddleBox />
</div>
);
}
Проделаем все тоже самое с маленькой
коробочкой SmallBox:
function SmallBox() {
return (
<p>I am ... </p>
);
}
Разместим две таких коробочки в
MiddleBox:
import SmallBox from './SmallBox';
function MiddleBox() {
return (
<div>
<SmallBox />
<SmallBox />
</div>
);
}
Дерево мы с вами построили. А теперь мы
хотим от нашего App передать,
предположим, в SmallBox строковое
значение 'small box :)', не
используя пропсы, а пользуясь
контекстом (вдруг наше коробочное
приложение разрастется до огромных
размеров).
Файл с контекстом MyContext.js мы
уже создали и подключили на прошлом уроке.
Следующий шаг, который мы сделаем - обернем
BigBox в провайдер контекста,
который является свойством нашего объекта
контекста MyContext. Теперь все
компоненты, заключенные в данную конструкцию
(а это и все коробочки, вложенные в
BigBox) смогут получить доступ и
подписаться на изменения контекста. В качестве
значения контекста мы передаем желаемое
'small box :)':
function App() {
return (
<MyContext.Provider value="small box :)">
<BigBox />
</MyContext.Provider>
);
}
А теперь осталось прочитать значение
контекста. Мы хотели использовать его в
SmallBox, значит импортируем
туда файл контекста MyContext.js
и хук useContext:
import { useContext } from 'react';
import { MyContext } from './MyContext.js';
Прочитаем с помощью useContext
значение контекста в переменную name:
function SmallBox() {
const name = useContext(MyContext);
return (
<div>
<p>I am ... </p>
</div>
);
}
Мы подписали SmallBox на данный
контекст и, если он изменится, этот
компонент также будет обновлен.
И, наконец, подставляем значение переменной
name вместо многоточия:
function SmallBox() {
const name = useContext(MyContext);
return (
<div>
<p>I am {name} </p>
</div>
);
}
В пустом компоненте App создайте
компонент Parent, а в нем компонент
Daughter, а в Daughter компонент
Grandson. Используя контекст,
передайте из App значение
возраста 42, а с помощью
useContext выведите его в
компоненте Daughter.
А теперь в компоненте Grandson
выведите значение возраста,
но поделенное на 2.