В React props (сокращение от properties) — это механизм передачи данных от родительского компонента дочернему компоненту. Пропсы являются одними из фундаментальных строительных блоков React, и они используются для создания повторно используемых и динамических компонентов.

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

Навигация по статье

Что такое пропсы в React

Пропсы — это данные, доступные только для чтения, которые передаются от родительского компонента дочернему компоненту. Они используются для настройки поведения и внешнего вида компонента. Пропсы похожи на аргументы функции или атрибуты HTML, но они специфичны для компонентов React.

Пропсы передаются компоненту как объект, и к ним можно получить доступ в компоненте, используя ключевое слово props. Вот пример простого функционального компонента, который получает пропс:

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

ReactDOM.render(
  <Greeting name="John" />,
  document.getElementById('root')
);

В этом примере мы передаем функциональному компоненту Greeting проп с именем name. Доступ к пропсу осуществляется в компоненте с помощью объекта props.

Пропсы могут использоваться для передачи данных любого типа, включая строки, числа, логические значения, объекты и даже функции. ПРопсы также можно использовать для передачи других компонентов в качестве дочерних.

Рекомендации по работе с пропсами в React

Вот несколько рекомендаций по работе с реквизитами в React:

Используйте информативные имена пропсов: пропсам следует присваивать имена в соответствии с их предполагаемым использованием в компоненте. Информативные имена облегчают понимание того, как предполагается использовать компонент.
Используйте пропсы по умолчанию: пропсы по умолчанию — это значения, которые используются, если пропс не предоставлен. Пропсы по умолчанию можно использовать для обеспечения того, чтобы компонент всегда содержал правильные данные.

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

Greeting.defaultProps = {
  name: 'World'
};

ReactDOM.render(
  <Greeting />,
  document.getElementById('root')
);

В этом примере мы предоставляем значение по умолчанию для значения name на случай, если оно не указано при использовании компонента.

Используйте PropTypes: PropTypes используются для проверки того, что реквизиты, передаваемые компоненту, имеют правильный тип. PropTypes можно использовать для раннего обнаружения ошибок и обеспечения правильного использования компонента.

import PropTypes from 'prop-types';

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

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

ReactDOM.render(
  <Greeting name={123} />,
  document.getElementById('root')
);

В этом примере мы используем PropTypes, чтобы гарантировать, что значение name является строкой. Свойство IsRequired используется для обеспечения предоставления пропса.

Избегайте изменения пропсов: пропсы доступны только для чтения, и их не следует изменять в дочернем компоненте. Если компоненту необходимо изменить свои реквизиты, он должен сделать это в родительском компоненте.

Заключение

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