Come impostare i puntelli predefiniti del componente sul componente React

Uso il codice qui sotto per impostare oggetti di scena predefiniti su un componente React ma non funziona. Nel render()metodo, posso vedere l'output "oggetti di scena non definiti" è stato stampato sulla console del browser. Come posso definire un valore predefinito per gli oggetti di scena del componente?

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

Hai dimenticato di chiudere la Classparentesi.

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

Per coloro che usano qualcosa come Babel Stage-2 o Transform-Class-Properties :

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' }
   };

   ...

}

Aggiornare

A partire da React v15.5, è PropTypesstato spostato dal pacchetto React principale ( link ):

import PropTypes from 'prop-types';

modificare

Come sottolineato da @johndodo, staticle proprietà della classe in realtà non fanno parte delle specifiche ES7, ma al momento sono supportate solo da Babel. Aggiornato per riflettere ciò.

Per prima cosa devi separare la tua classe dalle ulteriori estensioni poiché non puoi estenderla AddAddressComponent.defaultPropsall'interno classinvece di spostarla all'esterno.

Ti consiglierò anche di leggere sul ciclo di vita di Costruttore e React: vedi Specifiche dei componenti e Ciclo di vita

Ecco cosa vuoi:

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;

Puoi anche usare il compito di Destructuring.

class AddAddressComponent extends React.Component {
  render() {

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

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

Mi piace questo approccio in quanto non è necessario scrivere molto codice.

usa un default statico Props come:

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

Preso da: https://github.com/facebook/react-native/issues/1772

Se si desidera controllare i tipi, vedere come utilizzare PropTypes nella risposta di treyhakanson o Ilan Hasanov o rivedere le numerose risposte nel link sopra.

Puoi impostare gli oggetti di scena predefiniti usando il nome della classe come mostrato di seguito.

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

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

Puoi usare il modo raccomandato da React da questo link per maggiori informazioni

Per un tipo di funzione prop è possibile utilizzare il seguente codice:

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

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

Se si utilizza un componente funzionale, è possibile definire i valori predefiniti nell'assegnazione destrutturante, in questo modo:

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' };