reactjs - props - Cómo configurar accesorios predeterminados del componente en el componente React

react js ejemplos

Question

Utilizo el siguiente código para establecer accesorios predeterminados en un componente React pero no funciona. En el método render() , 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,
}

Answer 1

Olvidó cerrar el soporte de Class .

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

Answer 2

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, PropTypes se retiró del paquete React principal ( link ):

import PropTypes from ''prop-types'';

Editar

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

Answer 3

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

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

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

Answer 4

Primero debe separar su clase de las extensiones adicionales, por ejemplo, no puede extender AddAddressComponent.defaultProps dentro de la class lugar de moverla fuera.

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;

Answer 5

Puede establecer 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 link para obtener más información

Answer 6

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} }) => {
  ...
};

Answer 7

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.

Answer 8

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.