Composant React.createClass cassé ? Réparons-le !

Si vous construisez des blocs WordPress Gutenberg (ou même si vous ne le faites pas), vous essayez peut-être de faire fonctionner un composant React tiers dans votre build. Mais s’il s’agit d’un élément plus ancien, en particulier un élément qui utilise la React.createClassméthode obsolète, vous risquez de rester bloqué.

Les fichiers qui accompagnent ce didacticiel se trouvent dans les dossiers d’origine et corrigés dans le dossier des composants de la solution GitHub.

Obtenir des fichiers de didacticiel à partir de GitHub

Je cherchais une liste de cases à cocher qui me permettait de passer un tableau d’options (similaire à la façon dont vous pourriez passer plusieurs options <SelectControl/>dans WordPress Gutenberg). L’option intégrée <CheckboxControl/>n’avait pas d’option, mais après quelques recherches sur le Web, j’ai trouvé [react-checkbox-list](https://github.com/sonyan/react-checkbox-list) par Sony An (disponible react-checkbox-listsur npm ).

Cela a fait tout ce que je voulais qu’il fasse, mais après l’avoir installé via npm( npm install react-checkbox-list --save), cela n’a pas fonctionné. Je savais que je devrais bifurquer et patcher le plugin.

Notez que ce didacticiel couvre la correction des méthodes React.createClasset existantes. Si vous souhaitez savoir comment les patcher avec la méthode d’utilisation préférée, veuillez consulter l’article sur ce sujet.React.propTypes [React.Component](https://mattwatson.codes/converting-react-createclass-to-react-component/)

Patcher le composant React

Le premier problème que vous rencontrerez est que le composant ne se chargera même pas et une Uncaught TypeError: Cannot read property 'array' of undefinederreur plutôt désagréable vous sera présentée.

Erreur de type non détectée, impossible de lire la propriété ‘tableau’ de non défini

C’est parce que le composant contient la ligne suivante defaultData: React.PropTypes.array,et c’est parce React.PropTypesqu’elle n’est pas définie.

React.PropTypes n’est pas défini

Une petite enquête sur la documentation de React montre qu’elle [React.PropTypes](https://reactjs.org/docs/typechecking-with-proptypes.html) a été déplacée dans un package différent dans React version 15.5. Il nous conseille d’utiliser la bibliothèque prop-types à la place.

Il vous donne même un lien vers le référentiel npm pour la bibliothèque prop-types. Alors allons-y et installons la bibliothèque prop-types.

npm install --save prop-types

En haut de notre document, importons la prop-typesbibliothèque. La manière moderne de procéder nous obligerait à utiliser la [import](https://mattwatson.codes/converting-react-createclass-to-react-component/) syntaxe, mais pour l’instant, gardons la même syntaxe ajoutée var PropTypes = require('prop-types');au document ci-dessous où nous déclarons React. La déclaration d’ouverture devrait maintenant ressembler à ceci :

'use strict';
var React     = require('react');
var PropTypes = require('prop-types');

module.exports = React.createClass({
    displayName: 'CheckBoxList',

    propTypes: {
        defaultData: React.PropTypes.array,
        onChange: React.PropTypes.func
    },
...

Super truc! Cependant, nous recevons toujours le 'array' of undefinedmessage d’erreur. Eh bien, c’est parce que la syntaxe utilisée est React.PropTypes.arrayet nous venons de déclarer nos PropTypes pour utiliser la variable PropTypes. La solution simple consiste donc à rechercher et à remplacer toutes les instances de React.PropTypespar PropTypes.

Notre bloc de code d’ouverture devrait maintenant ressembler à ceci :

'use strict';
var React     = require('react');
var PropTypes = require('prop-types');

module.exports = React.createClass({
    displayName: 'CheckBoxList',

    propTypes: {
        defaultData: PropTypes.array,
        onChange: PropTypes.func
    },
...

Et voilà, notre problème PropTypes est maintenant résolu! Rafraîchissons notre composant et voyons si cela fonctionne.

Non, nous obtenons maintenant l’erreurUncaught TypeError: React.createClass is not a function.

Erreur de type non interceptée : React.createClass n’est pas une fonction.

Encore une fois, une petite recherche autour de la documentation React et des notes de version pour la v15.5.0 nous montre qu’elle React.createClassa été dépréciée dans la version 15.5.0.

Avec React.PropTypes, React.createClassa été refactorisé dans son propre package, car la méthode préférée de création de composants React utilise [React.Component](https://mattwatson.codes/converting-react-createclass-to-react-component/).

Le remplaçant de React.createClass est maintenant dans son propre référentiel npm en tant que create-react-class. Alors allons-y et installons ceci dans notre build.

npm install --save create-react-class

Nous devons importer le package dans notre build, en conservant à nouveau la syntaxe au format classique et en ajoutant la ligne var CreateReactClass = require('create-react-class');en haut du document, comme suit :

'use strict';
var React            = require('react');
var PropTypes        = require('prop-types');
var CreateReactClass = require('create-react-class');

module.exports = React.createClass({
    displayName: 'CheckBoxList',

    propTypes: {
        defaultData: PropTypes.array,
        onChange: PropTypes.func
    },
...

Encore une fois, notre erreur ne disparaîtra pas, car nous devons remplacer toutes les instances de React.createClasspar notre nouvel objet importé CreateReactClass. Cela devrait ressembler un peu à ceci :

'use strict';
var React            = require('react');
var PropTypes        = require('prop-types');
var CreateReactClass = require('create-react-class');

module.exports = CreateReactClass({
    displayName: 'CheckBoxList',

    propTypes: {
        defaultData: PropTypes.array,
        onChange: PropTypes.func
    },
...

Et c’est tout! Le composant ne produit plus d’erreurs et notre console JavaScript est agréable et propre.

La solution finie ressemble un peu à ceci :

Le composant Patched React Multiple Checklist dans WordPress Gutenberg

Code source du didacticiel

Vous pouvez télécharger le code source de la version originale et corrigée du composant sur GitHub. Le plugin contient un bloc WordPress Gutenberg que vous pouvez utiliser pour jouer avec le code, avec trois fichiers que vous pouvez supprimer selon le cas :

Les fichiers du didacticiel GitHub pour le correctif React.createClass

Soumettre une demande d’extraction au référentiel d’origine

La grande chose à propos de la communauté open source est que nous sommes libres de contribuer et d’améliorer le code. Voici la Pull Request avec le patch que je viens de créer que j’ai soumis à Sony An.