React
Requisiten reagieren

Bemerkungen

Einführung

props werden verwendet, um Daten und Methoden von einer übergeordneten Komponente an eine untergeordnete Komponente zu übergeben.

Interessantes über props

1. Sie sind unveränderlich.
2. Sie ermöglichen es uns, wiederverwendbare Komponenten zu erstellen.

Grundlegendes Beispiel

class Parent extends React.Component{
  doSomething(){
     console.log("Parent component");
  }
  render() {
    return <div>
         <Child 
           text="This is the child number 1"
           title="Title 1" 
           onClick={this.doSomething} />
         <Child 
           text="This is the child number 2"
           title="Title 2" 
           onClick={this.doSomething} />
      </div>
  }
}

class Child extends React.Component{
  render() {
    return <div>
       <h1>{this.props.title}</h1>
       <h2>{this.props.text}</h2>
      </div>
  }
}

Wie Sie im Beispiel sehen können, können wir dank props wiederverwendbare Komponenten erstellen.

Standard-Requisiten

defaultProps können Sie standardmäßig oder Ausweich - Werte für die Komponente setzen props . defaultProps ist hilfreich, wenn Sie Komponenten aus verschiedenen Ansichten mit festen Requisiten aufrufen, in einigen Ansichten müssen Sie jedoch andere Werte übergeben.

Syntax

ES5

var MyClass = React.createClass({
  getDefaultProps: function() {
    return {
      randomObject: {},
      ...
    };
  }
}

ES6

class MyClass extends React.Component {...}
  
MyClass.defaultProps = {
    randomObject: {},
    ...
}

ES7

class MyClass extends React.Component {  
    static defaultProps = {
        randomObject: {},
        ...
    };
}

Das Ergebnis von getDefaultProps() oder defaultProps wird zwischengespeichert und verwendet, um sicherzustellen, dass this.props.randomObject einen Wert hat, wenn es nicht von der übergeordneten Komponente angegeben wurde.

PropTypes

propTypes können Sie festlegen , welche props Ihre Komponente Bedürfnisse und die Art sie sein sollten. Ihre Komponente funktioniert ohne Festlegen von propTypes . Es ist jedoch propTypes , diese zu definieren, da sie Ihre Komponente lesbarer macht und anderen Entwicklern, die Ihre Komponente lesen, als Dokumentation dient. Während der Entwicklung wird React Sie warnen, wenn Sie dies versuchen Legen Sie eine Eigenschaft fest, die sich von der Definition unterscheidet, die Sie für sie definiert haben.

Einige primitive propTypes und häufig verwendbare propTypes sind -

  optionalArray: React.PropTypes.array,
  optionalBool: React.PropTypes.bool,
  optionalFunc: React.PropTypes.func,
  optionalNumber: React.PropTypes.number,
  optionalObject: React.PropTypes.object,
  optionalString: React.PropTypes.string,
  optionalSymbol: React.PropTypes.symbol

Wenn Sie " isRequired an einen beliebigen propType anhängen, muss diese propType beim Erstellen der Instanz dieser Komponente angegeben werden. Wenn Sie die erforderlichen propTypes nicht propTypes Komponenteninstanz nicht erstellt werden.

Syntax

ES5

var MyClass = React.createClass({
  propTypes: {
    randomObject: React.PropTypes.object,
    callback: React.PropTypes.func.isRequired,
    ...
  }
}

ES6

class MyClass extends React.Component {...}
  
MyClass.propTypes = {
    randomObject: React.PropTypes.object,
    callback: React.PropTypes.func.isRequired,
    ...
};

ES7

class MyClass extends React.Component {  
     static propTypes = {
        randomObject: React.PropTypes.object,
        callback: React.PropTypes.func.isRequired,
        ...
    };
}

Komplexere Requisitenvalidierung

Auf dieselbe Weise können Sie mit PropTypes komplexere Validierungen angeben

Objekt überprüfen

...
    randomObject: React.PropTypes.shape({
        id: React.PropTypes.number.isRequired,
        text: React.PropTypes.string,
    }).isRequired,
...

Überprüfung auf Array von Objekten

...
    arrayOfObjects: React.PropTypes.arrayOf(React.PropTypes.shape({
        id: React.PropTypes.number.isRequired,
        text: React.PropTypes.string,
    })).isRequired,
...

Requisiten mit Spread-Operator weitergeben

Anstatt

var component = <Component foo={this.props.x} bar={this.props.y} />;

Wo jede Eigenschaft als Einzelstütze Wert übergeben werden muss , können Sie den Spread - Operator verwenden ... für Arrays in ES6 unterstützt alle Werte weitergeben. Die Komponente wird jetzt so aussehen.

var component = <Component {...props} />;

Denken Sie daran, dass die Eigenschaften des Objekts, das Sie übergeben, auf die Requisiten der Komponente kopiert werden.

Die Reihenfolge ist wichtig. Spätere Attribute überschreiben vorherige.

 var props = { foo: 'default' };
 var component = <Component {...props} foo={'override'} />;
 console.log(component.props.foo); // 'override'

Ein anderer Fall ist, dass Sie den Spread-Operator auch verwenden können, um nur Teile von Requisiten an untergeordnete Komponenten zu übergeben. Anschließend können Sie die Destruktursyntax von Requisiten erneut verwenden.

Es ist sehr nützlich, wenn Kinderkomponenten viele Requisiten benötigen, sie jedoch nicht einzeln übergeben werden sollen.

 const { foo, bar, other } = this.props // { foo: 'foo', bar: 'bar', other: 'other' };
 var component = <Component {...{foo, bar}} />;
 const { foo, bar } = component.props
 console.log(foo, bar); // 'foo bar'

Requisiten.Kinder und Komponentenzusammensetzung

Die "Kinderkomponenten" einer Komponente sind auf einer speziellen Requisite props.children . Diese Requisite ist sehr nützlich für "Compositing" -Komponenten und kann JSX-Markup intuitiver machen oder die beabsichtigte endgültige Struktur des DOM widerspiegeln:

var SomeComponent = function () {
    return (
        <article className="textBox">
            <header>{this.props.heading}</header>
            <div className="paragraphs">
                {this.props.children}
            </div>
        </article>
    );
}

Dadurch können Sie bei der späteren Verwendung der Komponente beliebig viele Unterelemente hinzufügen:

var ParentComponent = function () {
    return (
        <SomeComponent heading="Amazing Article Box" >
            <p className="first"> Lots of content </p>
            <p> Or not </p>
        </SomeComponent>
    );
}

Props.children können auch von der Komponente manipuliert werden. Da props.children ein Array sein kann oder nicht , stellt React als React.Children Dienstfunktionen bereit . Betrachten Sie im vorherigen Beispiel, ob wir jeden Absatz in ein eigenes <section> -Element einschließen wollten:

var SomeComponent = function () {
    return (
        <article className="textBox">
            <header>{this.props.heading}</header>
            <div className="paragraphs">
                {React.Children.map(this.props.children, function (child) {
                    return (
                        <section className={child.props.className}>
                            React.cloneElement(child)
                        </section>
                    );
                })}
            </div>
        </article>
    );
}

Beachten Sie die Verwendung von React.cloneElement, um die Requisiten aus dem untergeordneten <p> -Tag zu entfernen. Da Requisiten unveränderlich sind, können diese Werte nicht direkt geändert werden. Stattdessen muss ein Klon ohne diese Requisiten verwendet werden.

Wenn Sie Elemente in Schleifen hinzufügen, sollten Sie sich darüber im Klaren sein, wie React Kinder während eines Wiederherstellungsprozesses abgeglichen wird , und es sollte in Erwägung gezogen werden, eine global eindeutige key untergeordnete Elemente zu verwenden, die in einer Schleife hinzugefügt werden.

Ermitteln des Typs der untergeordneten Komponenten

Manchmal ist es sehr nützlich, den Typ der untergeordneten Komponente beim Durchlaufen dieser Komponenten zu kennen. Um die untergeordneten Komponenten zu durchlaufen, können Sie die React Children.map util-Funktion verwenden:

React.Children.map(this.props.children, (child) => {
  if (child.type === MyComponentType) {
    ...
  }
});

Das untergeordnete Objekt macht die type Eigenschaft verfügbar, die Sie mit einer bestimmten Komponente vergleichen können.