Festlegen der Komponenten-Standardrequisiten für die React-Komponente

134

Ich verwende den folgenden Code, um Standard-Requisiten für eine React-Komponente festzulegen, aber es funktioniert nicht. In der render()Methode kann ich sehen, dass die Ausgabe "undefinierte Requisiten" auf der Browserkonsole gedruckt wurde. Wie kann ich einen Standardwert für die Komponentenstützen definieren?

export default class AddAddressComponent extends Component {

render() {
   let {provinceList,cityList} = this.props
    if(cityList === undefined || provinceList === undefined){
      console.log('undefined props')
    }
    ...
}

AddAddressComponent.contextTypes = {
  router: React.PropTypes.object.isRequired
}

AddAddressComponent.defaultProps = {
  cityList: [],
  provinceList: [],
}

AddAddressComponent.propTypes = {
  userInfo: React.PropTypes.object,
  cityList: PropTypes.array.isRequired,
  provinceList: PropTypes.array.isRequired,
}
Joey Yi Zhao
quelle

Antworten:

139

Sie haben vergessen, die ClassHalterung zu schließen .

class AddAddressComponent extends React.Component {
  render() {
    let {provinceList,cityList} = this.props
    if(cityList === undefined || provinceList === undefined){
      console.log('undefined props')
    } else {
      console.log('defined props')
    }

    return (
      <div>rendered</div>
    )
  }
}

AddAddressComponent.contextTypes = {
  router: React.PropTypes.object.isRequired
};

AddAddressComponent.defaultProps = {
  cityList: [],
  provinceList: [],
};

AddAddressComponent.propTypes = {
  userInfo: React.PropTypes.object,
  cityList: React.PropTypes.array.isRequired,
  provinceList: React.PropTypes.array.isRequired,
}

ReactDOM.render(
  <AddAddressComponent />,
  document.getElementById('app')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app" />

Serhii Baraniuk
quelle
92

Für diejenigen, die so etwas wie babel stage-2 oder transform-class-properties verwenden :

import React, { PropTypes, Component } from 'react';

export default class ExampleComponent extends Component {
   static contextTypes = {
      // some context types
   };

   static propTypes = {
      prop1: PropTypes.object
   };

   static defaultProps = {
      prop1: { foobar: 'foobar' }
   };

   ...

}

Aktualisieren

Ab React v15.5 PropTypeswurde aus dem Hauptreaktionspaket ( Link ) entfernt:

import PropTypes from 'prop-types';

Bearbeiten

Wie von @johndodo hervorgehoben, sind staticKlasseneigenschaften eigentlich kein Teil der ES7-Spezifikation, sondern werden derzeit nur von babel unterstützt. Aktualisiert, um dies widerzuspiegeln.

treyhakanson
quelle
danke für die antwort, aber ich wollte ein bisschen mehr darüber erfahren, also habe ich mir react/ nativedoc angesehen und konnte sie nicht finden, wo ist das doc dafür?
farmcommand2
Ich denke nicht, dass dies explizit in den React-Dokumenten enthalten ist, aber wenn Sie verstehen, um welche staticKlassenvariablen es sich handelt, ist dies sinnvoll. Ich empfehle daher, sie auf MDN zu lesen . Grundsätzlich entspricht die Syntax in der Dokumentation dieser, da beide der Klasse selbst Informationen zu den Requisiten hinzufügen, nicht zu den einzelnen Instanzen.
Treyhakanson
1
Der Import wird geändert in: PropTypes aus 'Prop-Typen' importieren;
Tibi
1
@treyhakanson Der MDN-Link behandelt nur statische Methoden, keine Variablen. Ich konnte keine Referenz für statische Klassenvariablen finden, außer für Babel . Ist dies eine akzeptierte ES7-Eigenschaft?
Johndodo
15

Zuerst müssen Sie Ihre Klasse von den weiteren Erweiterungen trennen, z. B. können Sie sie nicht AddAddressComponent.defaultPropsinnerhalb der erweitern, classsondern nach außen verschieben.

Ich werde Ihnen auch empfehlen, sich über den Lebenszyklus des Konstruktors und der Reaktion zu informieren: siehe Komponentenspezifikationen und Lebenszyklus

Folgendes möchten Sie:

import PropTypes from 'prop-types';

class AddAddressComponent extends React.Component {
  render() {
    let { provinceList, cityList } = this.props;
    if(cityList === undefined || provinceList === undefined){
      console.log('undefined props');
    }
  }
}

AddAddressComponent.contextTypes = {
  router: PropTypes.object.isRequired
};

AddAddressComponent.defaultProps = {
  cityList: [],
  provinceList: [],
};

AddAddressComponent.propTypes = {
  userInfo: PropTypes.object,
  cityList: PropTypes.array.isRequired,
  provinceList: PropTypes.array.isRequired,
}

export default AddAddressComponent;
Ilanus
quelle
Bist du sicher, dass sie das constructorund brauchen componentWillReceiveProps? Mir scheint, das OP hat gerade eine schließende Klammer für ihre Klassendeklaration vergessen.
ivarni
@ivarni nicht unbedingt, aber es ist wichtig, dass er den Lebenszyklus, den Konstruktor und die Klassenerweiterungen versteht. so wird er wissen, was er tut.
Also habe
2
Fair genug, ich denke nur, dass es nicht ganz richtig ist , "du musst" zu sagen . Ich würde eher etwas in der Art von "Sie können diese Methoden hinzufügen, um den Lebenszyklus zu beobachten" sagen . Ansonsten gute Antwort :)
ivarni
9

Sie können auch die Destrukturierungszuweisung verwenden.

class AddAddressComponent extends React.Component {
  render() {

    const {
      province="insertDefaultValueHere1",
      city="insertDefaultValueHere2"
    } = this.props

    return (
      <div>{province}</div>
      <div>{city}</div>
    )
  }
}

Ich mag diesen Ansatz, da Sie nicht viel Code schreiben müssen.

Sam Henderson
quelle
2
Das Problem, das ich hier sehe, ist, dass Sie möglicherweise Standard-Requisiten in mehreren Methoden verwenden möchten.
Gerard Brull
5

Verwenden Sie statische defaultProps wie:

export default class AddAddressComponent extends Component {
    static defaultProps = {
        provinceList: [],
        cityList: []
    }

render() {
   let {provinceList,cityList} = this.props
    if(cityList === undefined || provinceList === undefined){
      console.log('undefined props')
    }
    ...
}

AddAddressComponent.contextTypes = {
  router: React.PropTypes.object.isRequired
}

AddAddressComponent.defaultProps = {
  cityList: [],
  provinceList: [],
}

AddAddressComponent.propTypes = {
  userInfo: React.PropTypes.object,
  cityList: PropTypes.array.isRequired,
  provinceList: PropTypes.array.isRequired,
}

Entnommen aus: https://github.com/facebook/react-native/issues/1772

Wenn Sie die Typen überprüfen möchten, lesen Sie, wie PropTypes in der Antwort von treyhakanson oder Ilan Hasanov verwendet werden, oder lesen Sie die vielen Antworten im obigen Link.

Brandon Keith Biggs
quelle
4

Sie können die Standard-Requisiten unter Verwendung des Klassennamens wie unten gezeigt festlegen.

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

// Specifies the default values for props:
Greeting.defaultProps = {
  name: 'Stranger'
};

Sie können den von React empfohlenen Weg über diesen Link verwenden, um weitere Informationen zu erhalten

Rohith Murali
quelle
4

Für einen Funktionstyp prop können Sie den folgenden Code verwenden:

AddAddressComponent.defaultProps = {
    callBackHandler: () => {}
};

AddAddressComponent.propTypes = {
    callBackHandler: PropTypes.func,
};
Wolfack
quelle
2

Wenn Sie eine Funktionskomponente verwenden, können Sie Standardwerte in der Destrukturierungszuweisung wie folgt definieren:

export default ({ children, id="menu", side="left", image={menu} }) => {
  ...
};
Brian Burns
quelle
0
class Example extends React.Component {
  render() {
    return <h1>{this.props.text}</h1>;
  }
}

Example.defaultProps = { text: 'yo' }; 
Lepkem
quelle