„Props” to specjalne słowo kluczowe w React. Props służy do przekazywania danych do komponentu.

Podczas używania rekwizytów, takich jak zmienna w komponencie, możemy dotrzeć z obiektami rekwizytów do komponentów.

Prop jest obiektem JavaScript i wewnątrz rekwizytu znajduje się nazwa rekwizytu i zmienna.

Dzięki rekwizytom możemy dokonać transferu wartości między komponentami.

Składnik 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;

Zamiast zapisywać rekwizyty za każdym razem, możemy zapisać właściwość wewnątrz komponentów;
Lubię to;

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

export default Users;

Celem tego; dowolny proces listowania itp. key prop służy do wyświetlania wyrażeń, które zwracamy w pętlach z dobrą wydajnością. Najbardziej zewnętrznemu elementowi można nadać kluczowy rekwizyt.

Rodzaje rekwizytów

Przede wszystkim musimy zaimportować do PropTypes.

Kiedy wysyłamy typy do zdefiniowanych przez nas właściwości, definiujemy typy poza komponentem.

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;

Jeśli napiszemy obok niego isRequired po określeniu typu rekwizytów, to pole nie może pozostać puste.

Piszemy isRequired obok właściwości, której typ podaliśmy;

name: PropTypes.string.isRequired,

Jeśli zamierzamy wprowadzić więcej niż jeden typ danych dla właściwości, używamy OneOfType.

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

Po wprowadzeniu danych typu obiektu używamy kształtu do zdefiniowania typów dla elementów podrzędnych obiektu.

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

możemy nadać wartość domyślną rekwizytowi, który nie ma przypisanego żadnego typu. Musimy go zdefiniować z wyjątkiem innych typów.

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,
}