Контекст на Практиці

Створимо джерело про планети. Ми будемо використовувати Context, щоб уникнути буріння пропсів. Додаток складатиметься з наступних компонентів: App, Filter, PlanetList і PlanetItem. Для візуалізації їх ієрархії, будь ласка, зверніться до зображення нижче.

Крок 1

Створимо Context у файлі context.js на верхньому рівні.

Крок 2

Повідомимо всьому додатку, що ми використовуємо контекст. Отже, нам потрібно обернути весь додаток за допомогою Context.Provider у файлі App.jsx.

Крок 3

На цьому кроці ми повинні встановити дані контексту (проп value для компонента Context.Provider). Почнемо з рендерингу деяких даних. Дані представлені у вигляді масиву об'єктів:

Ось що ми зробимо:

Імпортуємо дані з файлу data.js з файлу

Ініціалізуємо стан для planets порожнім масивом за допомогою хука useState.

Використовуємо хук useEffect для присвоєння імпортованих даних змінній planets. Це гарантує, що ми матимемо дані для рендерингу.

Створюємо змінну appData, що представляє всі дані додатку, яка буде об'єктом зі станом planets.

Присвоїмо змінну appData пропу value провайдера контексту.

Повний код файлу App.jsx після третього кроку.

Крок 4

Давайте розглянемо компонент PlanetList. Він призначений для відображення певної розмітки. Всередині цієї розмітки ми використовуємо компонент PlanetItem. Варто зазначити, що ми не передаємо ніяких пропсів і не використовуємо контекст всередині цього компонента, оскільки немає необхідності працювати з даними на цьому рівні.

Крок 5

На цьому кроці нам потрібно отримати доступ до даних, щоб відобразити інформацію про планети. Для цього ми виконаємо такі дії:

Імпортуємо Context з файлу context.js.

Використовуємо хук useContext для отримання даних planets з контексту.

Відобразимо розмітку за допомогою функції map, яка дозволяє нам ітераційно переглядати набір даних у React. Застосуємо деструктуризацію, щоб отримати доступ до всіх властивостей кожного об'єкта планети.

Повний код файлу PlanetItem.jsx після п'ятого кроку.

Повний код програми:

Будь ласка, знайдіть хвилинку, щоб переглянути весь проект, звернувши увагу на загальну функціональність і структуру. Наразі ми пропонуємо зосередитися на розумінні того, як дані передаються та відображаються в різних компонентах. Зверніть увагу на те, як дані отримуються і використовуються в дочірніх компонентах, за винятком компонента Filter. Компонент Filter буде складним завданням у наступному розділі, щоб ви могли ще більше розширити функціональність програми.