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

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

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" />

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.

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;

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.

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.

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

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

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

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

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

export default ({ children, id="menu", side="left", image={menu} }) => {
  ...
};

class Example extends React.Component {
  render() {
    return <h1>{this.props.text}</h1>;
  }
}

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