Props: передача данных в компонент

Научись делать свои компоненты переиспользуемыми, передавая им данные через props.

7 мин · 3 вопросов

Компонент, который всегда показывает одно и то же, не очень полезен. Props (сокращение от «properties», свойства) - это данные, которые ты передаёшь компоненту, ровно как аргументы функции. Представь пригласительную карточку: шаблон одинаковый для всех, меняется только имя гостя. Компонент - это шаблон, а prop - имя.

function Greeting(props) {
  return <p>Hello, {props.name}!</p>;
}

function App() {
  return (
    <div>
      <Greeting name="Lea" />
      <Greeting name="Karim" />
    </div>
  );
}

В App ты пишешь name="Lea" как HTML-атрибут: React собирает все эти значения в объект, который компонент получает под именем props. Дальше ты читаешь props.name внутри фигурных скобок. На практике props часто деструктурируют прямо в скобках функции: function Greeting({ name }). Ещё один важный момент: текст пишется в кавычках, а всё остальное (числа, логические значения, массивы) - в фигурных скобках.

function ProfileCard({ name, age }) {
  return (
    <div>
      <h3>{name}</h3>
      <p>{age} years old</p>
    </div>
  );
}

function App() {
  return <ProfileCard name="Nadia" age={31} />;
}

В этом вся сила props: социальная сеть не пишет отдельный компонент под каждый пост, она пишет один-единственный компонент Post и передаёт ему разные props миллионы раз. Шаблон ты пишешь один раз, а используешь везде.

Проверка знаний

Убедись, что запомнил ключевые моменты этого урока.

1. Для чего нужны props?
   • Для передачи данных от родительского компонента к дочернему
   • Для хранения данных, которые меняются со временем
   • Для применения CSS-стилей к компоненту
2. Как передать число 25 компоненту Profile?
   • <Profile age="25" />
   • <Profile age={25} />
   • <Profile age=25 />
3. Может ли компонент изменять полученные props?
   • Да, если делает это внутри return
   • Да, но только строки
   • Нет, props доступны только для чтения