В React термин “props” (сокращение от “properties”, по-русски “реквизиты” или “свойства”) используется для передачи данных от родительских компонентов к дочерним. Реквизиты являются неизменными (immutable) и доступны только для чтения в компоненте, в который они передаются.
Вот основные характеристики реквизитов в React:
- Передача данных:
- Родительский компонент может передать данные своим дочерним компонентам через реквизиты.
- Реквизиты передаются в виде атрибутов компонента при его использовании в JSX. Пример:
// Родительский компонент передает значение "name" в дочерний компонент <ChildComponent name="John" />
- Использование в дочернем компоненте:
- Дочерний компонент получает реквизиты в виде объекта
props. Пример:function ChildComponent(props) { return <p>Hello, {props.name}!</p>; }
- Неизменяемость (Immutable):
- Реквизиты являются неизменяемыми, что означает, что компонент не должен изменять свои реквизиты.
- В React следует избегать изменения реквизитов напрямую.
- Использование по умолчанию (Default Props):
- Можно определить значения по умолчанию для реквизитов с помощью
defaultProps. Пример:function ChildComponent(props) { return <p>Hello, {props.name}!</p>; } ChildComponent.defaultProps = { name: 'Guest' };
- Передача функций:
- Реквизиты могут быть и функциями, которые используются для обратного вызова из дочерних компонентов к родительским. Пример:
function ParentComponent() { const handleClick = () => { console.log('Button clicked!'); }; return <ChildComponent onClick={handleClick} />; } function ChildComponent(props) { return <button onClick={props.onClick}>Click me</button>; }
- Передача компонентов в качестве реквизитов:
- Компоненты также могут быть переданы в качестве реквизитов, что позволяет создавать более гибкие и мощные интерфейсы. Пример:
function ParentComponent() { return <ChildComponent render={() => <p>Hello from ChildComponent</p>} />; } function ChildComponent(props) { return <div>{props.render()}</div>; }
Реквизиты в React являются основным механизмом для передачи данных между компонентами, что делает компоненты более переиспользуемыми и модульными.