Поширення стану між компонентами
Іноді вам потрібно, щоб стан двох компонентів завжди змінювався разом. Для цього видаліть стан з обох компонентів, перенесіть його до їхнього найближчого спільного батьківського компонента і потім передайте вниз до них через пропси. Це називається підняттям стану вгору (lifting state up), і це одна з найпоширеніших речей, які ви будете робити під час написання React-коду.
You will learn
- Як поширювати стан між компонентами підняттям його вгору
- Що таке контрольовані та неконтрольовані компоненти
Підняття стану на прикладі
У цьому прикладі батьківський компонент Accordion рендерить два окремих компонента-панелі Panel:
AccordionPanelPanel
Кожний компонент Panel має булевий стан isActive, який визначає, чи його вміст видимий.
Натисніть кнопку “Показати” для обох панелей:
import { useState } from 'react'; function Panel({ title, children }) { const [isActive, setIsActive] = useState(false); return ( <section className="panel"> <h3>{title}</h3> {isActive ? ( <p>{children}</p> ) : ( <button onClick={() => setIsActive(true)}> Показати </button> )} </section> ); } export default function Accordion() { return ( <> <h2>Алмати, Казахстан</h2> <Panel title="Про Алмати"> З майже 2-мільйонним населеннм Алмати є найбільшим містом в Казахстані. З 1929 до 1997 воно було його столицею. </Panel> <Panel title="Етимологія"> Назва походить від казахського слова <span lang="kk-KZ">алма</span>, що означає "яблуко" і часто перекладалось як "повний яблук". Насправді регіон, який оточує Алмати вважається прабатьківщиною яблука, а дика <i lang="la">Malus sieversii</i> - ймовірним кандидатом на предка сучасного домашнього яблука. </Panel> </> ); }
Зверніть увагу, що натискання кнопки однієї панелі не впливає на іншу панель — вони незалежні.
Спочатку стан isActive кожного Panel дорівнює false, тому обидва мають згорнутий вигляд
Натискання на будь-яку з кнопок Panel призведе до оновлення стану isActive тільки цієї Panel
Але тепер припустимо, що ви хочете змінити це так, щоб тільки одна панель була розгорнута в будь-який момент часу. За цього дизайну розгортання другої панелі повинно згорнути першу. Як би ви це зробили?
Щоб скоординувати ці дві панелі, вам потрібно “підняти їхній стан вгору” до батьківського компонента в три кроки:
- Видалити стан із дочірніх компонентів.
- Передати незмінні дані від спільного батьківського компонента.
- Додати стан до спільного батька і передати його вниз разом з обробниками подій.
Це дасть компоненту Accordion змогу скоординувати обидва компоненти Panel та розгортати тільки один щоразу.
Крок 1: Видаліть стан із дочірніх компонентів
Ви передасте контроль isActive компонента Panel його батьківському компоненту. Це означає, що батьківський компонент передасть isActive дочірньому Panel як проп. Почніть із видалення цього рядка з Panel:
const [isActive, setIsActive] = useState(false);Натомість додайте isActive до списку пропсів Panel:
function Panel({ title, children, isActive }) {Тепер батьківський компонент Panel може контролювати isActive, передаючи його як проп. І навпаки: Panel тепер не має контролю над значенням isActive — тепер це залежить від батьківського компонента!
Крок 2: Передайте незмінні дані від спільного батьківського компонента
Щоб підняти стан вгору, ви повинні виявити найближчий спільний батьківський компонент обох дочірніх компонентів, які ви хочете скоординувати:
Accordion(найближчий спільний батько)PanelPanel
У цьому прикладі ним є компонент Accordion. Оскільки він знаходиться над обома панелями і може контролювати їхні пропси, він стане “джерелом правди” для визначення того, яка панель є наразі відкритою. Зробіть так, щоб компонент Accordion передавав незмінне значення isActive (наприклад, true) до обох панелей:
import { useState } from 'react'; export default function Accordion() { return ( <> <h2>Алмати, Казахстан</h2> <Panel title="Про Алмати" isActive={true}> З майже 2-мільйонним населеннм Алмати є найбільшим містом в Казахстані. З 1929 до 1997 воно було його столицею. </Panel> <Panel title="Етимологія" isActive={true}> Назва походить від казахського слова <span lang="kk-KZ">алма</span>, що означає "яблуко" і часто перекладалось як "повний яблук". Насправді регіон, який оточує Алмати вважається прабатьківщиною яблука, а дика <i lang="la">Malus sieversii</i> - ймовірним кандидатом на предка сучасного домашнього яблука. </Panel> </> ); } function Panel({ title, children, isActive }) { return ( <section className="panel"> <h3>{title}</h3> {isActive ? ( <p>{children}</p> ) : ( <button onClick={() => setIsActive(true)}> Показати </button> )} </section> ); }
Спробуйте відредагувати жорсткокодовані значення isActive у компоненті Accordion та подивіться результат на екрані.
Крок 3: Добавте стан до батьківської компоненти
Підйом стану вгору часто змінює природу того, що ви зберігаєте як стан.
В цьому випадку, тільки одна панель має бути активною на даний момент. Це означає що Accordion спільний батьківський компонент має відстежувати, яка панель є активною. Замість boolean значення, можна використовувати число як індекс активної Panel для змінної стану:
const [activeIndex, setActiveIndex] = useState(0);Коли activeIndex доорівнює 0, перша панель буде відкритою і коли це значення дорівнює 1, активною буде друга.
Натискаючи “Показати” кнопку в одній із Panel має змінити активний індекс в Accordion. Panel не може встановлювати activeIndex стан безпосередньо, оскільки це визанчається всередині Accordion. Компонент Accordion повинен явно дозволити компоненту Panel змінювати свій стан за допомогою передавання обробника подій вниз як проп:
<>
<Panel
isActive={activeIndex === 0}
onShow={() => setActiveIndex(0)}
>
...
</Panel>
<Panel
isActive={activeIndex === 1}
onShow={() => setActiveIndex(1)}
>
...
</Panel>
</>Кнопка <button> всередині Panel тепер буде використовувати onShow проп як обробник події кліку:
import { useState } from 'react'; export default function Accordion() { const [activeIndex, setActiveIndex] = useState(0); return ( <> <h2>Алмати, Казахстан</h2> <Panel title="Про Алмати" isActive={activeIndex === 0} onShow={() => setActiveIndex(0)} > З майже 2-мільйонним населеннм Алмати є найбільшим містом в Казахстані. З 1929 до 1997 воно було його столицею. </Panel> <Panel title="Етимологія" isActive={activeIndex === 1} onShow={() => setActiveIndex(1)} > Назва походить від казахського слова <span lang="kk-KZ">алма</span>, що означає "яблуко" і часто перекладалось як "повний яблук". Насправді регіон, який оточує Алмати вважається прабатьківщиною яблука, а дика <i lang="la">Malus sieversii</i> - ймовірним кандидатом на предка сучасного домашнього яблука. </Panel> </> ); } function Panel({ title, children, isActive, onShow }) { return ( <section className="panel"> <h3>{title}</h3> {isActive ? ( <p>{children}</p> ) : ( <button onClick={onShow}> Показати </button> )} </section> ); }
Підняття стану вгору завершено! Переміщення стану в спільний батьківський компонент дозволяє вам скоординувати дві панелі. Використовуючи активний індекс замість двох “активно” прапорців гарантує, що тільки одна панель буде активною на даний момент. І передаючи вниз обробник подій до дочірньої компоненти дозволить йому змінювати батьківський стан.
Початково, Accordion має activeIndex із значенням 0, тому перша Panel отримує isActive = true
Коли стан Accordion activeIndex змінюється на 1, друга Panel отримує isActive = true
Deep Dive
Прийнято називати деякий компонент із локальним станом “неконтрольованим”. Для прикладу, вихідний Panel компонент із isActive змінною стану є неконтрольований, оскільки його батько не може впливати на те, чи буде панель активною чи ні.
На противагу, ви можете сказати що компонент є “контрольований” коли важлива інформація в ньому керується за допомогою пропсів а не його власним локальним станом. Це дозволяє батьківському компоненту повністю визанчити його поведінку. Останній Panel компонент із isActive проп є контрольований компонентом Accordion.
Неконтрольовані компоненти легше використовувати із їхніми батьківськими, оскільки вони вимагають менше налаштувань. Але вони менш гнучкі, коли ви хочете скоординувати їх разом. Контрольовані компоненти є максимально гнучкими але вони вимагають від батьківських компонент повністю налаштувати їх за допомогою пропсів.
На практиці, “контрольований” та “неконтрольований” не є строгими технічними термінами—кожен компонент зазвичай має певну суміш як локального стану та пропсів. Однак, це корисний спосіб, розповісти про те, як компоненти розроблені та які можливості вони пропонують.
Коли пишите компонент, подумайте, яка інформація в ньому має бути контрольованою (за допомогою пропсів), а яка інформація має бути неконтрольована (за допомогою стану). Але завжди можете передумати і змінити це пізніше.
Єдине джерело правди для кожного стану
В React застосунку, багато компонент матимуть їхній власний стан. Деякий стан може “жити” близько до листкових компонент (компоненти, що знаходяться внизу дерева), для прикладу, поля вводу. Інші стани можуть “жити” ближче до вершини застосунку. Для прикладу, навіть клієнтські бібліотеки маршрутизації зазвичай реалізовані за допомогою зберігання поточного маршруту в React стані та передають його вниз за допомогою пропсів!
Для кожної унікальної частинки стану, ви оберете компонент що “належить” йому. Цей принцип також відомий як “єдине джерело правди” Це не означає, що весь стан знаходиться в одному місці—це означає, що для кожної частини стану існує певний компонент, який містить ту частину інформації. Замість дублювання спільного стану між компонентами, підніміть його вгору до їхнього спільного батька та передайте його вниз до дочірніх компонент, де він потрібний.
Ваш застосунок буде змінюватись в міру того, як ви працюєте над ним. Часто буває так. що ви переміщуєте стан вниз або назад вгору, протягом того, як стараєтесь з’ясувати де кожен шматок стану “живе”. Це все частина процесу!
Щоб побачити, як це виглядає на практиці з кількома іншими компонентами, читайте Мислення в React.
Recap
- Коли ви хочете скоординувати два компоненти, перенесіть їхній стан до їхнього спільного батька.
- Потім передайте інформацію вниз через пропси від їхнього спільного батька.
- Нарешті, передайте обробник подій вниз, щоб діти могли змінювати батьківський стан.
- Корисно розглядати компонент як “контрольований” (керований пропсами) або “неконтрольований” (керований станом).
Challenge 1 of 2: Синхронізовані поля вводу
Ці два поля вводу є незалежні. Зробіть так, щоб вони були синхронізовані: редагування одного поля вводу має оновлювати інше поле вводу із тим самим текстом, і навпаки.
import { useState } from 'react'; export default function SyncedInputs() { return ( <> <Input label="Перше поле вводу" /> <Input label="Друге поле вводу" /> </> ); } function Input({ label }) { const [text, setText] = useState(''); function handleChange(e) { setText(e.target.value); } return ( <label> {label} {' '} <input value={text} onChange={handleChange} /> </label> ); }