2
votes

React PropType ne donne pas d'erreur lorsque isRequired est utilisé

J'essaie d'apprendre React, mais les PropTypes même lorsqu'ils sont utilisés avec isRequired ne génèrent aucune erreur. Suis-je en train de faire quelque chose de mal.

Le code est comme ceci

<SayHello firstName="John" lastName="Doe" />

Cela ne devrait-il pas générer une erreur ou un avertissement lorsque firstName et lastName ne sont pas envoyés.

Ainsi, ces deux accessoires sont obligatoires similaires à celui-ci.

<div id="root"></div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script crossorigin src="https://unpkg.com/prop-types@15.6.2/prop-types.min.js"></script>
<script crossorigin src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
<script type="text/babel">

    function SayHello(props) {
        return (
            <div>
                Hello {props.firstName} {props.lastName}!
            </div>
        )
    }

    SayHello.propTypes = {
        firstName: PropTypes.string.isRequired,
        lastName: PropTypes.string.isRequired,
    }

    ReactDOM.render(<SayHello />, document.getElementById('root'))

</script>

Je ne reçois aucune erreur ni aucun avertissement sur mon navigateur.

reactjs react-proptypes

2 commentaires

Salut, avez-vous vérifié la console du navigateur? proptypes y jette des erreurs, il n'affiche rien sur le port d'affichage réel du navigateur.

@bullettrain, je vérifie uniquement la console du navigateur. Même un avertissement Babel concernant le transformateur Babel intégré au navigateur apparaît mais rien d'autre.

3 Réponses :

2
votes

voici la solution de travail https://codesandbox.io/s/ymorp9y17v

import * as PropTypes from "prop-types";

const SayHello = props => {
  return (
    <div>
      Hello {props.firstName} {props.lastName}!
    </div>
  );
};

SayHello.propTypes = {
  firstName: PropTypes.string.isRequired,
  lastName: PropTypes.string.isRequired
};

export default SayHello;

4 commentaires

importer des PropTypes depuis 'prop-types'; c'est bien Il n'y a pas besoin du *

Oui, cela génère une erreur. Mais, quel était le problème avec mon code en premier lieu? De plus, mon code ne génère toujours pas d'erreur.

J'ai mis à jour l'extrait: codesandbox.io/s/ymorp9y17v . Je ne sais pas exactement pourquoi forcer l'importation * , mais mon IDE dit: l'exportation par défaut n'est pas déclarée dans le module importé

Cela n'a toujours pas généré d'erreur. J'ai changé les versions de unpkg et cela fonctionne.

3
votes

Il peut y avoir un problème avec la version minifiée des proptypes.

Changez votre

https://unpkg.com/prop-types@15.6.2/prop-types.min.js

https://unpkg.com/prop-types@15.6.2/prop-types.js

Vous recevrez un message d'avertissement Échec du type de propriété.

2 commentaires

Je vous remercie. Mais les versions minifiées ne devraient-elles pas avoir le même code mais sans commentaires ni sauts de ligne? Je connais jQuery et leurs versions mais ici?

C'est mon plaisir. Oui, la version minifiée doit fournir la même fonctionnalité en supprimant le code inutile. Dans ce cas, il peut y avoir un problème différent.

1
votes

EDIT

@JS Engine correct, changez les PropTypes de la version de production à la version de développement.

<div id="root"></div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script crossorigin src="https://unpkg.com/prop-types@15.6.2/prop-types.js"></script>
<script crossorigin src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
<script type="text/babel">

    function SayHello(props) {
        return (
            <div>
                Hello {props.firstName} {props.lastName}!
            </div>
        )
    }

    SayHello.propTypes = {
        firstName: PropTypes.string.isRequired,
        lastName: PropTypes.string.isRequired,
    }

    ReactDOM.render(<SayHello />, document.getElementById('root'))

</script>

0 commentaires