Что такое props?

Props в React

Props (properties) — это механизм передачи данных от родительского компонента к дочерним компонентам. Это основной способ коммуникации в React, который обеспечивает однонаправленный поток данных и делает приложение предсказуемым.

Основные характеристики Props

Props это объект, который содержит все атрибуты, переданные компоненту. Props:

• Readonly (только для чтения) — нельзя изменять внутри компонента
• Однонаправленные — данные идут только от родителя к дочернему компоненту
• Любого типа — строки, числа, объекты, функции, компоненты
• С дефолтными значениями — можно задать значения по умолчанию

Передача Props в функциональных компонентах

// Родительский компонент
function App() {
  return <Greeting name="Иван" age={30} isActive={true} />;
}

// Дочерний компонент
function Greeting(props) {
  return <h1>Привет, {props.name}! Тебе {props.age} лет.</h1>;
}

// Или с деструктуризацией (рекомендуется)
function Greeting({ name, age, isActive }) {
  return (
    <div>
      <h1>Привет, {name}!</h1>
      <p>Возраст: {age}</p>
      <p>Активен: {isActive ? 'Да' : 'Нет'}</p>
    </div>
  );
}

Классовые компоненты

class Welcome extends React.Component {
  render() {
    // В классовых компонентах доступ через this.props
    return <h1>Привет, {this.props.name}!</h1>;
  }
}

Default Props (значения по умолчанию)

function Card({ title, description = 'Описание отсутствует' }) {
  return (
    <div>
      <h2>{title}</h2>
      <p>{description}</p>
    </div>
  );
}

Типизация Props

// С использованием TypeScript
interface UserProps {
  name: string;
  age: number;
  email?: string;
  isAdmin?: boolean;
}

function User({ name, age, email, isAdmin }: UserProps) {
  return <div>{name}</div>;
}

Передача функций как Props

function Button({ onClick, children }) {
  return <button onClick={onClick}>{children}</button>;
}

function App() {
  const handleClick = () => console.log('Клик!');
  return <Button onClick={handleClick}>Нажми меня</Button>;
}

Rest Props и Spread оператор

function Layout({ title, children, ...rest }) {
  return (
    <div {...rest}>
      <h1>{title}</h1>
      {children}
    </div>
  );
}

Важные принципы работы с Props

1. Props flowing down — данные идут сверху вниз 2. Pure components — компонент не должен менять props 3. Composition over inheritance — комбинируй компоненты вместо наследования

Когда использовать Props

✅ Props используются для:

• Передачи конфигурации компоненту
• Управления поведением через колбэки
• Переиспользования одного компонента с разными данными
• Передачи дочерних элементов (children)

Props — это фундамент React, который обеспечивает предсказуемый и легко тестируемый код.