web-dev-qa-db-fra.com

PropTypes statiques ne fonctionnant pas sous ES6

Je veux ajouter quelques règles pour les accessoires:

import React, { Component } from 'react'

export default class App extends Component {
  static propTypes = { name: React.PropTypes.string.isRequired };

  render() {
    return(
    )
  }
}

Mais j'ai eu une erreur:

Warning: Failed prop type: Required prop `name` was not specified in `App`.

J'ai cette configuration pour babel:

{
  "presets": ["es2015", "react"],
  "plugins": ["transform-runtime", "transform-class-properties"]
}

Qu'est-ce que j'ai mal fait?

Upd. Changer le code: utilisez static

reactjsecmascript-6babel
14
Pavel

Il semble que vous ne transpiliez pas votre code de manière à reconnaître les propriétés de classe statiques. Si vous utilisez babel, vous pouvez l'activer à l'aide de la transformation de propriété de classe: https://babeljs.io/docs/plugins/transform-class-properties/ . 

Dans notre base de code, nous avons cette fonctionnalité avec le préréglage Stage 1, https://babeljs.io/docs/plugins/preset-stage-1/

Bien sûr, vous pouvez toujours définir vos types sur la classe:

export default class App extends Component {
  ...
  render() {
    ...
  } 
}

App.propTypes = {
 data: PropTypes.object.isRequired...
}

^^ cela ne nécessite aucune transpilation spéciale.

La propriété statique de la classe est agréable mais vous pouvez la configurer comme ceci 

export default class App extends Component {
  static propTypes = { name: React.PropTypes.string.isRequired };
  render() {...} 
}

plutôt que de définir les propTypes sur this dans le constructeur.

17
JizoSaves

Il s'agit d'une propriété statique de la classe ES7.

Vous pouvez l'utiliser avec babel-presets-stage-1. Voici la doc http://babeljs.io/docs/plugins/preset-stage-1/ et http://babeljs.io/docs/plugins/transform-class -Propriétés/

Si vous souhaitez utiliser toutes les fonctionnalités de ES7, vous devez simplement installer le babel-preset-stage-0.

npm install babel-preset-stage-0 --save-dev

Étant donné que la dépendance stage-0 est stage-1, stage-1 dépendance stage-2 et ainsi de suite. La npm installera toutes les dépendances. Vous pouvez donc utiliser toutes les fonctionnalités de l'ES7.

2
slideshowp2

Je laisse cette réponse pour les commentaires, mais la réponse de Timothy concernant Babel est meilleure.

Dans ES6, les classes ont des méthodes, et c'est tout - pas même les propriétés, encore moins les propriétés statiques:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/static

ES2017 peut prendre en charge un mécanisme de propriété différent:

_ { https://esdiscuss.org/topic/es7-property-initializers } _

Cette question est étroitement liée à alternatives de variables de classe ES6 et est probablement une dupe.

2
Dave Newton

UTILISATION DE BABEL 7

À partir de babel v7.1.0, pour utiliser les propriétés de classe statiques ainsi que celles déclarées avec la syntaxe de la propriété initializer, vous devez installer un plugin comme ci-dessous:

npm install --save-dev @babel/plugin-proposal-class-properties

En outre, tous les préréglages annuels de babel étaient obsolètes. Par conséquent, au lieu d'utiliser es2015, installez et utilisez simplement @babel/preset-env à côté de @babel/preset-react. Votre configuration babel devrait ressembler à celle ci-dessous:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": [["@babel/plugin-proposal-class-properties", { "loose": true }],]
}

En savoir plus sur le plugin ici .

Avec les installations et les configurations ci-dessus, vous pouvez réécrire votre composant comme suit:

import React, { Component } from 'react';
import PropTypes from 'prop-types';

export default class App extends Component {
  static propTypes = { name: PropTypes.string.isRequired };

  render() {
    return (
      <div>Static Class Properties</div>
    );
  }
}

Et voila ça marche !!

NOTE: PropTypes n'est plus dans le package react, vous devez l'importer séparément du package prop-types.

0
Aminu Kano