Что такое props

`props` — это сокращение от "properties" (свойства). Это концепция, используемая для передачи данных от родительского компонента к дочернему компоненту. Они являются неизменяемыми, что означает, что дочерний компонент не может напрямую изменять полученные его; вместо этого, любые изменения в данных должны происходить на уровне родительского компонента, который затем повторно передает его дочерним компонентам.

Как они работают

Когда вы создаете компонент, вы можете передать ему `props` следующим образом:

const ParentComponent = () => {
  return <ChildComponent name="Иван" age={30} />;
};

В этом примере, `ChildComponent` получает два `props`: `name` и `age`. Доступ к этим `props` внутри `ChildComponent` происходит так:

const ChildComponent = (props) => {
  return <h1>Привет, мое имя {props.name}, мне {props.age} лет.</h1>;
};

Особенности `props`

  • Неизменяемость: Предназначены только для чтения. Это означает, что компонент не может изменить свои `props`, но может либо использовать их "как есть", либо использовать их для вычисления новых значений внутри компонента.
  • Передача данных: Позволяют компонентам получать данные от родителя, что делает компоненты более гибкими и повторно используемыми.
  • Передача функций: Через него можно передавать не только данные, но и функции, что позволяет родительскому компоненту предоставлять обработчики событий дочерним компонентам.

Пример передачи функции

const ParentComponent = () => {
  const showAlert = () => {
    alert("Приветствие от родителя!");
  };

  return <ChildComponent showAlert={showAlert} />;
};

const ChildComponent = (props) => {
  return <button onClick={props.showAlert}>Показать приветствие</button>;
};

В этом примере, функция `showAlert` определена в `ParentComponent` и передается как `props` в `ChildComponent`, который затем использует ее как обработчик события клика для кнопки.

`props` — это механизм для передачи данных и функций от родительских компонентов к дочерним, делая компоненты гибкими и повторно используемыми. С помощью `props`, компоненты могут динамически отображать данные и взаимодействовать с другими компонентами в приложении.

Feb. 26, 2024, easyoffer

Примеры ответов: