React-Props

In React sind Props (Eigenschaften) ein Mechanismus, um Daten von einer übergeordneten Komponente an eine untergeordnete Komponente zu übergeben. Props sind schreibgeschützt; untergeordnete Komponenten können sie nicht direkt ändern. Stattdessen sollte die übergeordnete Komponente sie verwalten und aktualisieren.

Der Hauptunterschied zwischen State und Props istprops. Props sind unveränderlich, während sich State abhängig von Benutzerinteraktionen ändern kann. Aus diesem Grund müssen einige Container-Komponenten State definieren, um Daten zu aktualisieren und zu ändern. Untergeordnete Komponenten können Daten nur über Props weitergeben.

Props verwenden

Syntax zum Übergeben von Props:

<ComponentName propName={propValue} />

Das folgende Beispiel zeigt, wie Props in einer Komponente verwendet werden:

React-Beispiel

function HelloMessage(props) { return <h1>Hello {props.name}!</h1>; } const element = <HelloMessage name="Example"/>; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( element );

Ausprobieren »

Im Beispiel wird das Attribut name über props.name abgerufen.

Standard-Props

Sie können Standardwerte für Props mithilfe der defaultProps-Eigenschaft der Komponentenklasse festlegen, wie im Beispiel gezeigt:

React-Beispiel

class HelloMessage extends React.Component { render() { return ( <h1>Hello, {this.props.name}</h1> ); } } HelloMessage.defaultProps = { name: 'Example' }; const element = <HelloMessage/>; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( element );

Ausprobieren »

Mehrere Props

Sie können mehrere Eigenschaften an eine untergeordnete Komponente übergeben.

Beispiel

const UserCard = (props) => {
  return (
    <div>
      <h2>{props.name}</h2>
      <p>Alter: {props.age}</p>
      <p>Standort: {props.location}</p>
    </div>
  );
};

const App = () => {
  return (
    <UserCard name="Alice" age={25} location="New York" />
  );
};

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

propTypes Validierung

propTypes ist ein von React bereitgestelltes Werkzeug zur Typprüfung von Komponenten-Props.

Du kannst die Bibliothek prop-types verwenden, um eine Typprüfung der Komponenten-Props durchzuführen.

In React wird propTypes als statische Eigenschaft einer Komponente definiert. Zuerst musst du das Paket prop-types installieren:

npm install prop-types

Dann importiere prop-types in deiner Komponentendatei und definiere die Eigenschaft propTypes. Hier ist ein Beispiel:

Beispiel

import PropTypes from 'prop-types';

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

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

const App = () => {
  return (
    <div>
      <Greeting name="Alice" />
      {/* <Greeting /> // Diese Zeile verursacht eine Konsolenwarnung, weil name erforderlich ist */}
    </div>
  );
};

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

Callback-Funktionen als Props übergeben

Du kannst Funktionen als Props an untergeordnete Komponenten übergeben, und untergeordnete Komponenten können diese Funktionen aufrufen, um mit der übergeordneten Komponente zu kommunizieren.

Beispiel

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { message: '' };
  }

  handleMessage = (msg) => {
    this.setState({ message: msg });
  };

  render() {
    return (
      <div>
        <ChildComponent onMessage={this.handleMessage} />
        <p>Nachricht vom Kind: {this.state.message}</p>
      </div>
    );
  }
}

const ChildComponent = (props) => {
  const sendMessage = () => {
    props.onMessage('Hello from Child!');
  };

  return (
    <div>
      <button onClick={sendMessage}>Nachricht senden</button>
    </div>
  );
};

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

Props destrukturieren

In Funktionskomponenten kannst du Code vereinfachen, indem du Props destrukturierst.

Beispiel

const Greeting = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

const App = () => {
  return <Greeting name="Alice" />;
};

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

Zusammenfassung

  • Props übergeben und verwenden: Die übergeordnete Komponente übergibt Daten an die untergeordnete Komponente, und die untergeordnete Komponente durchpropsempfängt.
  • Standard-Props: VerwendedefaultPropsum die Standardeigenschaftswerte der Komponente festzulegen.
  • PropTypes-Validierung: Verwenden Sieprop-typesBibliothek zur Durchführung der Typprüfung von Props.
  • Übergeben von Callback-Funktionen: Die Elternkomponente kann Funktionen als Props an Kindkomponenten übergeben, um die Kommunikation zwischen Komponenten zu ermöglichen.
  • Destrukturierung von Props: Destrukturieren Sie Props in Funktionskomponenten, um den Code zu vereinfachen.

State und Props

Das folgende Beispiel zeigt, wie State und Props zusammen in einer Anwendung verwendet werden. Wir können State in der Elternkomponente festlegen und ihn über Props an die Kindkomponente übergeben. In der render-Funktion legen wir name und site fest, um die von der Elternkomponente übergebenen Daten zu erhalten.

React-Beispiel

class WebSite extends React.Component { constructor() { super(); this.state = { name: "Example", site: "https://www.example.com" } } render() { return ( <div> <Name name={this.state.name} /> <Link site={this.state.site} /> </div> ); } } class Name extends React.Component { render() { return ( <h1>{this.props.name}</h1> ); } } class Link extends React.Component { render() { return ( <a href={this.props.site}> {this.props.site} </a> ); } } const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <WebSite /> );

Ausprobieren »

Props-Validierung

React.PropTypes wurde nach React v15.5 in dieprop-types-Bibliothek verschoben.

<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/prop-types/15.8.1/prop-types.min.js" type="application/javascript"></script>

Props-Validierung verwendetpropTypes, was sicherstellt, dass unsere Anwendungskomponenten korrekt verwendet werden. React.PropTypes bietet viele Validatoren, um zu prüfen, ob die eingehenden Daten gültig sind. Wenn ungültige Daten an Props übergeben werden, gibt die JavaScript-Konsole eine Warnung aus.

Das folgende Beispiel erstellt eine Mytitle-Komponente. Die title-Prop ist erforderlich und muss ein String sein. Nicht-String-Typen werden automatisch in Strings konvertiert:

React 16.4 Beispiel

var title = "Beispiel"; // var title = 123; class MyTitle extends React.Component { render() { return ( <h1>Hello, {this.props.title}</h1> ); } } MyTitle.propTypes = { title: PropTypes.string }; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <MyTitle title={title} /> );

Ausprobieren »

React 15.4 Beispiel

var title = "Beispiel"; // var title = 123; var MyTitle = React.createClass({ propTypes: { title: React.PropTypes.string.isRequired, }, render: function() { return <h1> {this.props.title} </h1>; } }); const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <MyTitle title={title} /> );

Ausprobieren »

Natürlich können wir mehr einführenPropTypesValidatoren und wie man sie einsetzt. Im Folgenden sind einige häufig verwendetePropTypesValidator-Beschreibungen:

Grundlegende Datentypen

  • PropTypes.string: Zeichenkette
  • PropTypes.number: Number
  • PropTypes.boolean: Boolean
  • PropTypes.object: Object
  • PropTypes.array: Array
  • PropTypes.func: Function
  • PropTypes.symbol：Symbol

Spezielle Typen

  • PropTypes.node: Alles, was gerendert werden kann: Zahlen, Strings, Elemente oder Arrays (einschließlich dieser Typen)
  • PropTypes.element: React-Element
  • PropTypes.instanceOf(Class): Eine Instanz einer Klasse

Kombinierte Typen

  • PropTypes.oneOf(['option1', 'option2']): Enum-Typ, der Wert muss einer der angegebenen Optionen sein
  • PropTypes.oneOfType([PropTypes.string, PropTypes.number]): Einer von mehreren Typen
  • PropTypes.arrayOf(PropTypes.number): Ein Array eines bestimmten Typs
  • PropTypes.objectOf(PropTypes.number): Ein Objekt, das aus einem bestimmten Typ besteht
  • PropTypes.shape({ key: PropTypes.string, value: PropTypes.number }): Ein Objekt mit einer spezifischen Form

Andere

  • PropTypes.any: Beliebiger Typ
  • PropTypes.exact({ key: PropTypes.string }): Ein Objekt mit spezifischen Schlüsseln und ohne zusätzliche Schlüssel

Die folgenden sind einige Beispielcodeausschnitte, die zeigen, wie verschiedenePropTypesValidatoren:

Beispiel

import React from 'react';
import ReactDOM from 'react-dom/client';
import PropTypes from 'prop-types';

class MyComponent extends React.Component {
  static propTypes = {
    title: PropTypes.string.isRequired, // Muss ein String sein und ist erforderlich
    age: PropTypes.number,              // Optionale Zahl
    isAdmin: PropTypes.bool,            // Optionaler boolescher Wert
    user: PropTypes.shape({             // Muss ein Objekt mit einer bestimmten Form sein
      name: PropTypes.string,
      email: PropTypes.string
    }),
    items: PropTypes.arrayOf(PropTypes.string), // Muss ein Array aus Strings sein
    callback: PropTypes.func,           // Optionale Funktion
    children: PropTypes.node,           // Optionaler renderbarer Inhalt
    options: PropTypes.oneOf(['option1', 'option2']), // Muss einer der spezifischen Werte sein
  };

  render() {
    return (
      <div>
        <h1>{this.props.title}</h1>
        {this.props.age && <p>Alter: {this.props.age}</p>}
        {this.props.isAdmin && <p>Admin</p>}
        {this.props.user && (
          <div>
            <p>Name: {this.props.user.name}</p>
            <p>E-Mail: {this.props.user.email}</p>
          </div>
        )}
        {this.props.items && (
          <ul>
            {this.props.items.map((item, index) => (
              <li key={index}>{item}</li>
            ))}
          </ul>
        )}
        {this.props.callback && (
          <button onClick={this.props.callback}>Klick mich</button>
        )}
        {this.props.children}
        {this.props.options && <p>Option: {this.props.options}</p>}
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <MyComponent
    title="Hallo, Welt!"
    age={30}
    isAdmin={true}
    user={{ name: "Max Mustermann", email: "[email protected]" }}
    items={['Element 1', 'Element 2', 'Element 3']}
    callback={() => alert('Button geklickt!')}
    options="option1"
  >
    <p>Dies ist ein untergeordnetes Element</p>
  </MyComponent>
);
Andere Erweiterungen