Пропсы

Пропсы (от англ. properties — свойства) — это данные, которые родительский компонент передаёт дочернему. Записываются они как атрибуты тега. Благодаря пропсам один компонент TodoItem может показывать разные задачи.

Передача и получение

Всё, что написано в теге компонента, приходит в функцию одним объектом. Измените src/components/TodoItem.jsx:

// src/components/TodoItem.jsx
export default function TodoItem(props) {
  return <li>{props.text}</li>;
}

Теперь передайте текст из App:

// src/App.jsx
import TodoItem from './components/TodoItem.jsx';
 
export default function App() {
  return (
    <ul>
      <TodoItem text="Купить молоко" />
      <TodoItem text="Позвонить Олегу" />
    </ul>
  );
}

На странице появятся два разных пункта: «Купить молоко» и «Позвонить Олегу».

Деструктуризация

Обычно объект пропсов сразу раскладывают на переменные — так короче и сразу видно, что компонент ожидает:

// src/components/TodoItem.jsx
export default function TodoItem({ text }) {
  return <li>{text}</li>;
}

Разные типы значений

Строки передают в кавычках, всё остальное — в фигурных скобках:

// src/components/TodoItem.jsx
export default function TodoItem({ text, done, priority }) {
  return (
    <li>
      {text} — приоритет {priority}, {done ? 'готово' : 'не готово'}
    </li>
  );
}

// src/App.jsx
<TodoItem text="Купить молоко" done={true} priority={2} />

Пункт покажет «Купить молоко — приоритет 2, готово». Для true есть сокращение: просто done без значения.

Значения по умолчанию

Если проп не передан, он равен undefined. Значение по умолчанию задают при деструктуризации:

// src/components/TodoItem.jsx
export default function TodoItem({ text, priority = 1 }) {
  return (
    <li>
      {text} (приоритет {priority})
    </li>
  );
}

<TodoItem text="Купить хлеб" /> покажет «Купить хлеб (приоритет 1)».

Передача объекта целиком

Когда данных много, удобно передать объект задачи одним пропсом:

// src/App.jsx
const todo = { id: 1, text: 'Купить молоко', done: false };
 
<TodoItem todo={todo} />;

// src/components/TodoItem.jsx
export default function TodoItem({ todo }) {
  return <li>{todo.text}</li>;
}

Такой вид будет использоваться дальше в курсе.

Данные идут сверху вниз

Пропсы передаются только от родителя к ребёнку. Ребёнок не может изменить пропсы родителя или передать их вверх. Чтобы ребёнок сообщил о событии, родитель передаёт ему функцию — это показано в уроке про подъём состояния.

Частая ошибка

Пропсы нельзя изменять — они только для чтения. Компонент получает данные от родителя и не должен их переписывать:

export default function TodoItem({ text }) {
  // Неправильно: text = text.toUpperCase();
 
  const title = text.toUpperCase();
  return <li>{title}</li>;
}

Если нужно другое значение, создайте новую переменную. Если значение должно меняться со временем, нужно состояние — о нём следующая глава.