Frontend | Вопросы собесов

Что такое props ?

Спросят с вероятностью 10%



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, компоненты могут динамически отображать данные и взаимодействовать с другими компонентами в приложении.



👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент.



🔐 База собесов | 🔐 База тестовых