«Реквизит» — это специальное ключевое слово в React. Реквизит используется для передачи данных компоненту.

В то время как реквизит используется как переменная в компоненте, мы можем использовать объект реквизита для компонентов.

Prop — это объект JavaScript, внутри которого содержится имя и переменная свойства.

Благодаря свойствам мы можем передавать значения между компонентами.

Компонент 1:

import react from 'react';
import Users from './Users';

function Counter() {
  return(
    <>
      <Users name="Fatma" />
    </>
  );
}
export default Counter;

function Users(props) {
  return (
    <>
    {props.name}
    </>
  );
}
export default Users;

Вместо того, чтобы каждый раз писать свойства, мы можем записать свойство внутрь компонентов;
Так;

function Users({name, age}) {
  return (
    <>
    <h1>{name} {age}</h1>
    </>
  );
}

export default Users;

Цель этого; любой процесс листинга и т. д. key prop используется для перечисления выражений, которые мы возвращаем в циклах с хорошей производительностью. Самому внешнему элементу можно присвоить key prop.

Типы реквизита

Прежде всего, нам нужно импортировать в PropTypes.

Когда мы отправляем типы в определяемые нами свойства, мы определяем типы вне компонента.

import PropTypes from "prop-types";

function Users({name, age, answer}) {
  return (
    <>
    <h1>{name} {age}</h1>
    </>
  );
}

Users.propTypes = {
  name: PropTypes.string,
  age: PropTypes.number,
  answer: PropTypes.bool,
};

export default Users;

Если мы напишем isRequired рядом с ним после указания типа реквизита, это поле не может быть оставлено пустым.

Мы пишем isRequired рядом со свойством, тип которого мы указали;

name: PropTypes.string.isRequired,

Если мы собираемся ввести более одного типа данных для свойства, мы используем OneOfType.

age: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),

Когда вводятся данные типа объекта, мы используем shape для определения типов дочерних элементов объекта.

address: PropTypes.shape({title : PropTypes.string, zipCode: PropTypes.number,}),

мы можем указать значение по умолчанию для реквизита, которому не назначен какой-либо тип. Нам нужно определить его, кроме других типов.

Users.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  answer: PropTypes.bool,
  address: PropTypes.shape({title : PropTypes.string, zipCode: PropTypes.number,}),
};

Users.defaultProps = {
  answer: false,
}