¿Está bien poner PropTypes y defaultProps como props estáticos dentro de la clase React?

Esta es la forma en que lo he estado haciendo desde hace bastante tiempo: 

export default class AttachmentCreator extends Component {
  render() {
    return <div>
      <RaisedButton primary label="Add Attachment" />
    </div>
  }
}

AttachmentCreator.propTypes = {
  id: PropTypes.string,
};

Pero he visto a la gente hacerlo de esta manera:

export default class AttachmentCreator extends Component {
  static propTypes = {
    id: PropTypes.string,
  };

  render() {
    return <div>
      <RaisedButton primary label="Add Attachment" />
    </div>
  }
}

Y de hecho he visto gente estableciendo el estado inicial fuera del constructor también. ¿Es una buena práctica? Me ha estado molestando, pero recuerdo una discusión en algún lugar donde alguien dijo que establecer accesorios predeterminados como una estática no es una buena idea, simplemente no recuerdo por qué.

Author: Bergi, 2016-04-21
Source

4 answers

Las propiedades que no son de función no se admiten actualmente para las clases es2015. es una propuesta para es2016. el segundo método es considerablemente más conveniente, pero se necesitaría un plugin para soportar la sintaxis (hay un plugin de babel muy común para ello).

Por otro lado, una mano llena de proyectos de código abierto está comenzando a tratar proptypes como interfaces TypeScript, o ActionConstants y en realidad crear carpetas/archivos separados que albergan varios tipos de prop de componentes y luego se importan en el componente.

Así que en resumen, ambas sintaxis están bien de usar. pero si solo desea usar estrictamente ES2015, esta última sintaxis aún no está soportada en la especificación.

 11
Author: PhilVarg,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-10-21 23:13:36

De hecho, es exactamente lo mismo en términos de rendimiento. Reaccionar.JS es una tecnología relativamente nueva, por lo que aún no está claro qué se consideran buenas prácticas o no. Si quieres confiar en alguien, consulta esta guía de estilo de AirBNB:

Https://github.com/airbnb/javascript/tree/master/react#ordering

import React, { PropTypes } from 'react';

const propTypes = {
  id: PropTypes.number.isRequired,
  url: PropTypes.string.isRequired,
  text: PropTypes.string,
};

const defaultProps = {
  text: 'Hello World',
};

class Link extends React.Component {
  static methodsAreOk() {
    return true;
  }

  render() {
    return <a href={this.props.url} data-id={this.props.id}>{this.props.text}</a>
  }
}

Link.propTypes = propTypes;
Link.defaultProps = defaultProps;

export default Link;

Están declarando una const con los literales del objeto PropTypes, mantienen la clase bastante limpia y los asignan más tarde a las propiedades estáticas. Me personalmente como este enfoque:)

 31
Author: dandel,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-04-21 19:36:09

Oh sí, es totalmente de fiar con Babel 

class DataLoader extends React.Component {
  static propTypes = {
    onFinishedLoading: PropTypes.func
  }

  static defaultProps = {
    onFinishedLoading: () => {}
  }
}

As como se transpila a esto de todos modos.

class DataLoader extends React.Component {}

DataLoader.propTypes = {
  onFinishedLoading: PropTypes.func
};

DataLoader.defaultProps = {
  onFinishedLoading: () => {}
};

Los campos estáticos se transpilan como propiedades de clase bajo el capó. Mira aquí a Babel REPL.

Además, asignando estado u otro campos de clase directamente en la clase se transpila en un constructor de instancia .

 4
Author: Qwerty,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-05-07 08:50:34

Si el componente no tiene estado, lo que significa que no cambia su propio estado en absoluto, debe declararlo como un componente sin estado (export default function MyComponent(props)) y declarar el propTypes fuera.

Si es una buena práctica poner la declaración de estado inicial en constructor depende de usted. En nuestro proyecto declaramos el estado inicial en componentWillMount() solo porque no nos gusta el repetitivo super(props) que tiene que usar con el constructor.

 0
Author: Foxhoundn,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-09-01 22:15:36