React-праблы для пачатківцаў: ператварэнне статычных компанентаў у шаблоны

Разбіўка інтерфейсу React на компоненты — це толькі палова частка можлівасцей перадзеўжання. Компонент, які завжды відображае той самы текст, є простаю елементам, а не будуючым блакам. Прабламы — це механізм, які дазволяе аднаму компоненту відображаць разны контэнт кожны раз, коли ён викорыстоўваецца. У гідзе пояснюецца, што такое прабламы, як даны пераходзяць з бацькіго компонента да дачыннаго, як чытаць прабламы внутры компонента і якія значэння можна перадаць, ўжо каб можна было ператворыць жорстка-запісаныя компоненты на перадзеўжуваныя шаблоны.

Калі компонент можа паказваць толькі адна раштунку

Калі вы вучыліся ствараць компоненты, тыповая дрэва прыкладнага програмі выглядае так, дзе кораневы App відображае калькі секцый:

App
│
├── Navbar
├── Hero
├── Features
├── Footer

Тепер уявіце картку товара для інтэрнет-магазіна. Яна паказвае назву, цэну, рэйтынг і кнопку купівлі:

-------------------------
📱 iPhone 16

₹79,999
⭐⭐⭐⭐⭐
Buy Now
-------------------------

Тады з’яўляецца трэба: паказаць 500 продуктав. Карточка, якая ўжо напісана, може паказаць толькі адні разы той самы тэлефон за тую ж цену, таму ноутбукі, наушнікі і гаджэты патрэбуюць практычна ідэнтычных элементаў, што суперашчодна. Патрэбна стабільная структура, але ў кожны раз падаюць разныя даны. Самэ гэта і дае можлівасць пропсам.

Што такое пропсы

„Пропсы“ — гэта скрацанне ад „properties“. Це значэнні, якія родны компонент перадае дзецінскаму компоненту пад час яго атрыбутавання. Компонент визначае структуру і стыль; пропсы падаюць деталі, якія робяць кожную інстанцыю унікальной.

Паводзік з кухнёй дапамагае разумець. Піцерыя не стварае новага рэцепта для кожнага замовлення. У яе є адзін рэцепт, а для кожнага замовлення падаюць разныя інструкцыі: додатковы сыр, грыбы, алівэць, кукурудза. Рэцепт — це компонент, а додатковы інгредыянты — пропсы.

Іншымі словамі, компанент выступае як шаблон, а пропсы запалняюць празрыні. Замест таго, каб ствараць окольны картак, які завжды показвае тое ж самае, напрыму:

Product Card
iPhone

вы ствараеце адні загальны картак продукту і перадаеце яму разныя даныя там, дзе бы ўжо ўжо яго викорыстоввалі.

Родныя компаненты, дзецінскія компаненты і однонаправленны поток данных

Пропсы маюць сэнс толькі ў контексте адносаў межы компанентамі. Кожны прыклад викорыстання React — это дрэва, у яком некалькі компанентаў відрасліваюць іншыя:

App
│
├── Navbar
├── Hero
├── ProductCard
└── Footer

Тут App ёсць родным компанентам, а Navbar, Hero, ProductCard і Footer — яго дзецінскімі компанентамі. Родны компанент выбірае, якія дзецінскія компаненты паказваць, і таксама можа перадаць кожнаму з іх інформацыю. Гэтая інформацыя — це яго пропсы.

React адстаіваецца ад однонаправленнага потоку данных: пропсы пераводзяцца ад роднага компаненту да дзецінскага.

App
│
│   title
│   price
│   rating
▼
ProductCard

Дзеціна компанента прыме title, price і rating, але яна не можа перадаць новыя значэнні назад через свае props. З точкі зору дзецінай компаненты, props таксама ў режыме толькі-чытаць. Компанента ніколи не должна мяніць props, якія яна прыме; якщо часам патрэбна змена, гэта должна быць часткаю стану, які зазвычай належыць родзічу. Калі дзецінай компаненты патрэбна перадаць якую-небудзь інфармацыю назад, напрыклад пра клік, родзіч перадае яй функцыю як prop, а дзеціна компанента яе вызывае. Паколькі даныя тэчу толькі в аднам напрамку, вы завжды можете з’ясавіць, звядзе камплейкаеся значэнне, праходзячы вышэй па дрэве структуры, што значна спраблівае знаходзіць багі.

Ваша першая компанента з props

Пачніце з компаненты, якая прыветствае каго-небудзь па імени. Яна прыме параметр пад назвай props і чытае props.name у сваім JSX:

function Welcome(props) {
  return (
    <h1>Hello, {props.name}</h1>
  );
}

export default Welcome;

Абяцелюючы элемент выканае яго адраджэнне і падае назву як атрыбут:

import Welcome from "./Welcome";

function App() {
  return (
    <>
      <Welcome name="Ayush" />
    </>
  );
}
export default App;

Рэзультат адраджэння ёсць:

Hello, Ayush

Што робіць кожны элемент сынтаксу

Перадача пропа падобна да запісу атрыбута HTML на тэге компонента:

<Welcome name="Ayush" />

Цяк лепей усвядоміць гэта як вызов функцыі з аргументамі. У той бок, компонент — это функцыя, якой першым параметрам ёсць пропы:

function Welcome(props)

React сабірае всі атрыбуты, якія вы запісалі на тэге, у адзін звычайны об’ект і падае яго як гэты параметр. Чытанне значэння — це звычайны доступ да атрыбута:

props.name

Так как абяцелюючы элемент падаў гэты атрыбут:

name="Ayush"

компонент адраджае:

Hello, Ayush

Назва props — це проста дагматыка. У багатьох кодавых базах яе раскладваюць у спіс параметраў, як у function Welcome({ name }).

Перадача калькольных props адразу

Рэальныя компаненты зазвычай патрабуюць больш чым адной значэння. Можна дадаць столькі атрыбутаў, сколькі хочаце. Згадайце, што строкі можна запісаць у лапкі, а цыфры і іншыя значэння JavaScript — у круглыя скобкі. У прыведзенай нижэй частцы коду не ёсць прасвечка межаў між назвай компаненту і першым атрыбутам; яна павінна выглядаць так: <Welcome name=...:

<Welcomename="Ayush"
    company="OpenAI"
    experience={6}
/>

Компанент чытае кожны prop па імени:

function Welcome(props) {

return (
    <>
      <h2>{props.name}</h2>
      <p>{props.company}</p>
      <p>{props.experience} Years</p>
    </>
  );
}

І атрыбутуе:

Ayush
OpenAI
6 Years

Зменіўшы props, той самы компанент адображае абсалютна іншую інфармацыю.

Павторна выкарыстоўваны карточкі продукту

Верніцеся да магазін. Карточка тепер чытае свой заглавле, цэну і рэйтинг з параметраў, а не за дапамогою жорсткага кодавання:

function ProductCard(props) {
return (
    <div>
      <h2>{props.title}</h2>
      <p>₹ {props.price}</p>
      <p>{props.rating}</p>
    </div>
  );
}
export default ProductCard;

Родны компонент можа атрыбутаваць столькі карточак, сколькі трэба, пры чым кожная мае своия данні. Цэна пасылаецца як число ў круглых скобках, а заглавле і рэйтинг — як строкі:

<ProductCard
title="iPhone 16"
price={79999}
rating="⭐⭐⭐⭐⭐"
/>
<ProductCard
title="Samsung S25"
price={68999}
rating="⭐⭐⭐⭐"
/>
<ProductCard
title="MacBook Air"
price={99999}
rating="⭐⭐⭐⭐⭐"
/>

Адны компонент, тры разных продукты, без дуплікацыі маркапа. Для 500 продуктов вы таксама не пішалі б 500 тагоў вручную: данні будуць выйшлі з масі, і карточкі будуць атрыбутаваны за дапамогою products.map(...), пры чым поля кожнага элемента пасылаюцца як параметры, а кожной карточцы даецца унікальны key.

Чаму параметры дазволяюць паўтарнае вжыцце

Без параметраў магазіну патрэбны околачыцый компонент для кожнага продукту:

ProductCard1
ProductCard2
ProductCard3
ProductCard4
ProductCard5

Это означае, што існуе багато файлаў з практычна ідэнтычным кодам, дзе кожныя змены дизайна павінны перапісвацца ў кожным месцы. За допамогай пропсаў процэс выглядае так: адна складовая падае даныя разнымі спосабамі:

ProductCard
↓
Different Product Data
↓
Multiple Cards

Одны файл визначае карточку; её экземпляры разніцяюцца толькі данымі. Гэта базовая модель, якая лежыць у основе велікіх React-прыемоў і систем дизайна.

Уявіце стандартную форму для заполнення: усі запоўнююць тыя ж поля, такія як імя, возраст і адреса, але з разнымі деталямі. Порожня форма — це складовая; заполненыя даныя — пропсы.

Якія значэння можна перадаць

Пропсы не обмежваюцца толькі текстам. Можна перадаць будзь-яе значэння JavaScript. Для строек можна вжываць цітатныя знакі:

name="Ayush"

Чысла пішуцца ў круглых скобках, тады React отрымае справжнее чысло, а не строек „26“:

age={26}

Булевыя значэння таксама пішуцца ў скобках:

isAdmin={true}

Можна перадаць значэнне зменнай:

name={username}

Або рэзультат будь-якага выразу, які адначыцца раней, чым ён будзе прыняты дзецячым элементам:

price={500 + 200}

Масівы, об’екты і функцыі таксама можна перадаць у той жа спосаб, унутры скобак. Функцыі як пропсы ўжоўляюцца для таго, каб дзецячыя элементы паведамлялі бацькія элементы пра змены, а спецыяльны пропс пад назвай children дозволяе компоненту абгорнуць любы маркап, який знаходзіцца межа ўсімі його вводнымі та заканчальнымі тагамі.

Значэнні, зашыфраваныя ў кодзе, проты пропсаў

Порашчыце загалоўку, зашыфраваную ў кодзе:

<h2>iPhone 16</h2>

з загалоўкай, якая задаецца пропсам:

<h2>{props.title}</h2>

Першы элемент можа паказваць толькі адзін продукт; другі — будь-які ўжо колькасць іх. Калі вы лепш заўважылі, што вводзіце конкрэтны контент у компонент, прызначаны для павторнага викорыстоўвання, запытайце ся, чы не трэба той контент заместыць пропам. Толькі уважайце за адныя крайносці: ператварэнне кожнай дробнай деталі на проп ускладняе викорыстоўванне компонентаў, таму паказвайце толькі тое, што справжньа разлічыцца пад час розных викорыстоўванняў.

Ёсць калі што памяркнуць пра тое, як самі компоненты структуруюцца? Паглядзіце „React components 101“.

Галоўныя выводы

• Пропы, абвярнутыя як properties, — это значэнні, якія абаковы компонент перадае дзецінскаму, калі яго атрыбутуе.
• Даныя трапляюцца толькі ў аднам напрамку — абаковым ка дзецінскаму, і дзецінскія компоненты спрыймаюць пропы як толькі для чытання.

React сабіра ўсе атрыбуты на тагу компаненту ў адны об’ект props, які пасылаецца як першы аргумент функцыі.

Для строкаў можна вжываць цітатныя знакі; числы, булевыя значэння, зменныя та выразы паказваюцца ў круглых скобках.

Адзін компанент з разными атрыбутамі можа заменіць многа практычна ідэентычных компанентов.

Наступныя етапы — это дэструктурыраванне атрыбутаў, пасылкі об’ектаў, масоў та функцый-вызываў, значэнняя-поштандараванняі та атрыбут children.