Statique propTypes pas de travail en vertu de l'ES6
Je tiens à 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 cette erreur:
Warning: Failed prop type: Required prop `name` was not specified in `App`.
J'ai cette configuration dans le projet babel:
{
"presets": ["es2015", "react"],
"plugins": ["transform-runtime", "transform-class-properties"]
}
Ce que j'ai fait de mal?
Upd. Changement de code: utilisation static
Double Possible de ES6 variable de classe alternatives
OriginalL'auteur Pavel | 2016-07-13
Vous devez vous connecter pour publier un commentaire.
Il semble que le vous n'êtes pas transpiling votre code dans une manière qui peut reconnaître statique de propriétés de la classe.
Si vous êtes à l'aide de babel, cette fonction peut être activée à l'aide de la Classe de la Propriété Transform : https://babeljs.io/docs/plugins/transform-class-properties/.
Dans notre base de code nous obtenir cette fonctionnalité à l'Étape 1 preset, https://babeljs.io/docs/plugins/preset-stage-1/
Bien sûr, vous pouvez toujours définir votre proptypes sur la classe:
^^ ce n'est pas nécessiter une transpilation.
La classe statique de la propriété est agréable de sorte que vous pouvez le configurer comme ceci
plutôt que de définir la propTypes sur
this
dans le constructeur.J'ai activé ce plugin
transform-class-properties
, mais continuent à obtenir cette erreurModifié pour utiliser
static
mais j'ai reçu ce message d'erreur:Warning: Failed prop type: Required prop name was not specified in App.
Donc ce qui est bon -- vous voulez que votre
App
pour exiger la propname
, c'est vous dire que vous avez oublié ce requis prop. Soit d'approvisionnement de l'hélice, par exemple, <App name="Nom de Test"/>, ou supprimer le isRquired de la propTypes de validation.J'ai couru dans des problèmes avec ReactRouter où, bien que j'ai pensé que j'ai toujours fourni un accessoire, RR aurait rendu le composant sans l'hélice, j'ai donc dû supprimer le
isRequired
désignation.OriginalL'auteur JizoSaves
Je pars de cette réponse pour les commentaires mais Timothée de réponse quant à Babel, c'est mieux.
Dans l'ES6, les classes ont des méthodes, et c'est tout, même pas de propriétés, et encore moins statique:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/static
ES2017 peut soutenir un autre mécanisme de propriété:
https://esdiscuss.org/topic/es7-property-initializers
Cette question est fortement liée à ES6 variable de classe alternatives et est en fin de compte probablement une dupe.
constructor(){ this.propTypes = { name: React.PropTypes.string.isRequired }; }
?Je suppose, mais qui les crée pour chaque instance, ce qui semble être un gaspillage.
ES2016 n'aura pas de propriétés statiques: 2ality.com/2016/01/ecmascript-2016.html
Merci, je pense :/ C'est le plus petit ensemble de fonctions de libération que j'ai jamais vu.
ce sont juste des "nouvelles fonctionnalités", il y a beaucoup (?) des correctifs de ce qui a été apporté avec ES2015.
OriginalL'auteur Dave Newton
C'est ES7 classe de propriété statique de la fonction.
Vous pouvez l'utiliser avec
babel-presets-stage-1
. Voici la dochttp://babeljs.io/docs/plugins/preset-stage-1/ et
http://babeljs.io/docs/plugins/transform-class-properties/
Si vous souhaitez utiliser toutes les fonctionnalités de l'ES7, vous avez juste besoin d'installer le
babel-preset-stage-0
.Parce que
stage-0
dépendance eststage-1
,stage-1
dépendancestage-2
et ainsi de suite. Lenpm
va installer toutes les dépendances. Vous pouvez donc utiliser toutes ES7.OriginalL'auteur slideshowp2
À L'AIDE DE BABEL 7
De babel v7.1.0, utiliser des propriétés de la classe ainsi que les propriétés déclarées à la propriété de l'initialiseur de syntaxe, vous devez installer un plugin comme ci-dessous:
Aussi, toutes babel annuel de presets ont été déconseillé, donc au lieu d'utiliser
es2015
suffit de l'installer et de l'utiliser@babel/preset-env
aux côtés de@babel/preset-react
. Votre babel configuration devrait ressembler à celui ci-dessous:Lire plus sur le plugin ici.
Ci-dessus, les installations et configurations, vous pouvez réécrire votre composant comme ci-dessous:
Et voila ça marche!!!!
NOTE:
PropTypes
n'est pas dansreact
paquetage, vous devez l'importer séparément deprop-types
paquet.OriginalL'auteur Aminu Kano