„Props“ ist ein spezielles Schlüsselwort in React. Requisiten werden zum Übergeben von Daten an eine Komponente verwendet.

Während Props beispielsweise als Variable in einer Komponente verwendet werden, können wir mit Props Objekte zu Komponenten gelangen.

Prop ist ein JavaScript-Objekt und in prop sind der Name und die Variable der Prop enthalten.

Aufgrund von Requisiten können wir einen Werttransfer zwischen Komponenten durchführen.

Komponente 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;

Anstatt jedes Mal Requisiten zu schreiben, können wir die Eigenschaft in die Komponenten schreiben.
So was;

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

export default Users;

Der Zweck davon; Bei jedem Auflistungsprozess usw. wird die Schlüsselstütze verwendet, um die Ausdrücke aufzulisten, die wir in Schleifen mit guter Leistung zurückgeben. Dem äußersten Element kann eine Schlüsselstütze zugewiesen werden.

Requisitentypen

Vor allem müssen wir in PropTypes importieren.

Wenn wir Typen an von uns definierte Eigenschaften senden, definieren wir Typen außerhalb der Komponente.

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;

Wenn wir daneben isRequired schreiben, nachdem wir den Requisitentyp angegeben haben, darf dieses Feld nicht leer bleiben.

Wir schreiben isRequired neben die Eigenschaft, deren Typ wir angegeben haben;

name: PropTypes.string.isRequired,

Wenn wir mehr als einen Datentyp für eine Eigenschaft eingeben, verwenden wir OneOfType.

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

Wenn Daten zu einem Objekttyp eingegeben werden, verwenden wir „Shape“, um Typen für die untergeordneten Elemente des Objekts zu definieren.

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

Wir können einer Requisite, der kein Typ zugewiesen ist, einen Standardwert zuweisen. Wir müssen es außer anderen Typen definieren.

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