Cómo configurar accesorios por defecto del componente en el componente Reaccionar

Utilizo el siguiente código para establecer accesorios predeterminados en un componente React pero no funciona. En el render()método, puedo ver que la salida "accesorios indefinidos" se imprimió en la consola del navegador. ¿Cómo puedo definir un valor predeterminado para los accesorios 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,
}

Olvidaste cerrar el Classsoporte.

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

Para aquellos que usan algo como 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' }
   };

   ...

}

Actualizar

A partir de React v15.5, PropTypesse eliminó del paquete React principal ( enlace ):

import PropTypes from 'prop-types';

Editar

Como señaló @johndodo, staticlas propiedades de clase en realidad no son parte de la especificación ES7, sino que actualmente solo son compatibles con babel. Actualizado para reflejar eso.

Primero debe separar su clase de las extensiones adicionales, por ejemplo, no puede extenderlas AddAddressComponent.defaultPropsen classlugar de moverlas hacia afuera.

También le recomendaré que lea sobre el ciclo de vida de Constructor y React: consulte Especificaciones de componentes y Ciclo de vida

Esto es lo que quieres:

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;

También puede usar la asignación de Destructuring.

class AddAddressComponent extends React.Component {
  render() {

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

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

Me gusta este enfoque ya que no necesitas escribir mucho código.

use un valor predeterminado estático como:

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

Tomado de: https://github.com/facebook/react-native/issues/1772

Si desea verificar los tipos, vea cómo usar PropTypes en la respuesta de treyhakanson o Ilan Hasanov, o revise las muchas respuestas en el enlace de arriba.

Puede configurar los accesorios predeterminados utilizando el nombre de la clase como se muestra a continuación.

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

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

Puede usar la forma recomendada de React desde este enlace para obtener más información

Para un accesorio de tipo de función, puede usar el siguiente código:

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

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

Si está utilizando un componente funcional, puede definir valores predeterminados en la asignación de desestructuración, de la siguiente manera:

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