Est-il possible de mettre propTypes et defaultProps comme des props statiques dans une classe React ?

Question

C'est ainsi que je procède depuis un certain temps déjà :

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

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

Mais j'ai vu des gens le faire de cette façon :

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

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

Et en fait, j'ai vu des gens définir l'état initial en dehors du constructeur également. Est-ce une bonne pratique ? Cela m'ennuie, mais je me souviens d'une discussion quelque part où quelqu'un a dit que définir les props par défaut comme statiques n'est pas une bonne idée - je ne me souviens plus pourquoi.

Answer 1

En fait, c'est exactement la même chose en termes de performances. React.JS est une technologie relativement nouvelle, donc on ne sait pas encore clairement ce qui est considéré comme de bonnes pratiques ou non. Si vous voulez faire confiance à quelqu'un, consultez le guide de style d'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;

Ils déclarent un const avec les littéraux de l'objet propTypes, gardent la classe assez propre et les assignent plus tard aux propriétés statiques. Personnellement, j'aime cette approche :)

Answer 2

Oh oui, c'est tout à fait légitime avec Babel.

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

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

...puisqu'il est transposé à ceci de toute façon.

class DataLoader extends React.Component {}

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

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

Les champs statiques sont transposés en tant que propriétés de classe sous le capot. Regardez ici à Babel REPL.

En outre, l'attribution état ou autre champs de classe directement dans la classe est transposée dans un fichier constructeur d'instance .

Answer 3

Les propriétés non fonctionnelles ne sont pas actuellement supportées pour les classes es2015. c'est une proposition pour es2016. la deuxième méthode est considérablement plus pratique, mais un plugin serait nécessaire pour supporter la syntaxe ( Il existe un plugin babel très courant pour cela. ).

D'autre part, un grand nombre de projets open source commencent à traiter les proptypes comme des interfaces TypeScript ou des ActionConstants et à créer des dossiers/fichiers séparés qui abritent divers proptypes de composants et sont ensuite importés dans le composant.

En résumé, les deux syntaxes peuvent être utilisées, mais si vous souhaitez utiliser uniquement la version ES2015, la dernière syntaxe n'est pas encore prise en charge par la spécification.

Answer 4

Si le composant est sans état, c'est-à-dire qu'il ne change pas du tout son propre état, vous devez le déclarer comme un composant sans état ( export default function MyComponent(props) ) et déclarer le propTypes à l'extérieur.

C'est à vous de voir si c'est une bonne pratique de mettre la déclaration de l'état initial dans le constructeur. Dans notre projet, nous déclarons l'état initial dans componentWillMount() juste parce que nous n'aimons pas le super(props) que vous devez utiliser avec le constructeur.