Какой пропс есть у каждого компонента?

Ответ: Детальное объяснение пропсов в React

В React у каждого компонента нет единого "универсального" пропса, который присутствует абсолютно у всех компонентов автоматически. Однако, можно выделить ключевой пропс, который есть у ЛЮБОГО компонента React, когда он получает атрибуты от родителя, и это — объект props (или его деструктурированная версия). Давайте разберем это подробно.

1. Базовый объект props

Каждый компонент React, создаваемый функцией или классом, всегда получает первым аргументом объект props, содержащий все переданные ему атрибуты. Даже если родитель ничего не передает, props всё равно будет пустым объектом {}.

Пример в функциональном компоненте:

function MyComponent(props) {
  // props существует всегда, даже если он пустой
  console.log(props); // {}
  return <div>Hello</div>;
}

// Использование без атрибутов
<MyComponent />

Пример в классовом компоненте:

class MyComponent extends React.Component {
  render() {
    // this.props существует всегда
    console.log(this.props); // {}
    return <div>Hello</div>;
  }
}

Таким образом, можно утверждать, что props — это пропс (точнее, объект, содержащий все пропсы), который есть у каждого компонента по умолчанию.

2. Что такое props?

props (properties) — это неизменяемый (immutable) объект, содержащий данные, переданные от родительского компонента. Они используются для:

• Конфигурации компонента (например, title, disabled, size).
• Передачи данных (например, user, items, onClick).
• Передачи React-элементов или других компонентов через children.

// Родитель передает пропсы
<Button 
  label="Click me" 
  onClick={handleClick} 
  disabled={false}
>
  <span>Child element</span>
</Button>

// Внутри Button компонента:
function Button({ label, onClick, disabled, children }) {
  // label, onClick, disabled, children - всё это свойства объекта props
  return (
    <button onClick={onClick} disabled={disabled}>
      {label} {children}
    </button>
  );
}

3. Особый пропс children

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

function Card(props) {
  // props.children существует, даже если ничего не передано
  return <div className="card">{props.children}</div>;
}

// Использование
<Card>
  <h3>Заголовок</h3>  {/* Это станет props.children */}
  <p>Контент</p>
</Card>

Важно: children может быть:

• React-элементом или массивом элементов
• Строкой или числом для текстового содержимого
• undefined, если ничего не передано
• Функцией (в случае использования render props pattern)

4. Пропсы по умолчанию и PropTypes

Хотя React не навязывает обязательные пропсы, существуют механизмы для работы с ними:

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

function Greeting({ name = 'Гость' }) {
  return <h1>Привет, {name}!</h1>;
}

// Или для классовых компонентов:
Greeting.defaultProps = {
  name: 'Гость'
};

PropTypes (статическая проверка типов):

import PropTypes from 'prop-types';

function Greeting({ name }) {
  return <h1>Привет, {name}!</h1>;
}

Greeting.propTypes = {
  name: PropTypes.string.isRequired
};

5. Исключения и особые случая

1. Компоненты-обертки (HOCs) могут модифицировать или добавлять пропсы:

function withLogging(WrappedComponent) {
  return function EnhancedComponent(props) {
    console.log('Props:', props);
    return <WrappedComponent {...props} />;
  };
}

1. Context API предоставляет данные через провайдеры, минуя явную передачу через props.

2. Фрагменты (<>...</>) и некоторые встроенные компоненты (например, <React.Suspense>) имеют ограниченный набор допустимых пропсов.

Вывод

Таким образом, если отвечать строго на вопрос: у каждого компонента React всегда присутствует объект props как первый аргумент (в функциональных компонентах) или как свойство this.props (в классовых компонентах). Этот объект может быть пустым, но он существует всегда. Среди всех возможных пропсов наиболее универсальным можно считать children, который React автоматически заполняет вложенными элементами.

Ключевая мысль: В React пропсы — это основной механизм коммуникации "сверху вниз" (от родителя к потомку), и объект для их получения присутствует у любого компонента по умолчанию, формируя контракт между компонентом и его окружением.