{"id":228535,"date":"2022-10-12T11:26:00","date_gmt":"2022-10-12T08:26:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228535"},"modified":"2022-11-09T02:54:24","modified_gmt":"2022-11-08T23:54:24","slug":"composant-react-createclass-casse-reparons-le","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/composant-react-createclass-casse-reparons-le\/","title":{"rendered":"Composant React.createClass cass\u00e9\u00a0? R\u00e9parons-le\u00a0!"},"content":{"rendered":"\n

Si vous construisez des blocs WordPress Gutenberg (ou m\u00eame si vous ne le faites pas), vous essayez peut-\u00eatre de faire fonctionner un composant React tiers dans votre build<\/a>. Mais s’il s’agit d’un \u00e9l\u00e9ment plus ancien, en particulier un \u00e9l\u00e9ment qui utilise la React.createClass<\/code>m\u00e9thode obsol\u00e8te, vous risquez de rester bloqu\u00e9.<\/p>\n

Les fichiers qui accompagnent ce didacticiel se trouvent dans les dossiers d’origine et corrig\u00e9s dans le dossier des composants de la solution GitHub.<\/p>\n

Obtenir des fichiers de didacticiel \u00e0 partir de GitHub<\/a><\/p>\n

Je cherchais une liste de cases \u00e0 cocher qui me permettait de passer un tableau d’options (similaire \u00e0 la fa\u00e7on dont vous pourriez passer plusieurs options <SelectControl\/><\/code>dans WordPress Gutenberg). L’option int\u00e9gr\u00e9e <CheckboxControl\/><\/code>n’avait pas d’option, mais apr\u00e8s quelques recherches sur le Web, j’ai trouv\u00e9 [react-checkbox-list](https:\/\/github.com\/sonyan\/react-checkbox-list)<\/code> par Sony An<\/a> (disponible react-checkbox-list<\/code>sur npm<\/a> ).<\/p>\n

Cela a fait tout ce que je voulais qu’il fasse, mais apr\u00e8s l’avoir install\u00e9 via npm( npm install react-checkbox-list --save<\/code>), cela n’a pas fonctionn\u00e9. Je savais que je devrais bifurquer et patcher le plugin.<\/p>\n

Notez que ce didacticiel couvre la correction des m\u00e9thodes React.createClass<\/code>et existantes. Si vous souhaitez savoir comment les patcher avec la m\u00e9thode d’utilisation pr\u00e9f\u00e9r\u00e9e,<\/a> veuillez consulter l’article sur ce sujet<\/a>.React.propTypes<\/code><\/a> [React.Component](https:\/\/mattwatson.codes\/converting-react-createclass-to-react-component\/)<\/code><\/a><\/p>\n

Patcher le composant React<\/h2>\n

Le premier probl\u00e8me que vous rencontrerez est que le composant ne se chargera m\u00eame pas et une Uncaught TypeError: Cannot read property 'array' of undefined<\/code>erreur plut\u00f4t d\u00e9sagr\u00e9able vous sera pr\u00e9sent\u00e9e.<\/p>\n

Erreur de type non d\u00e9tect\u00e9e, impossible de lire la propri\u00e9t\u00e9 ‘tableau’ de non d\u00e9fini<\/p>\n

C’est parce que le composant contient la ligne suivante defaultData: React.PropTypes.array,<\/code>et c’est parce React.PropTypes<\/code>qu’elle n’est pas d\u00e9finie.<\/p>\n

\"ComposantReact.PropTypes n’est pas d\u00e9fini<\/p>\n

Une petite enqu\u00eate sur la documentation de React montre qu’elle<\/a> [React.PropTypes](https:\/\/reactjs.org\/docs\/typechecking-with-proptypes.html)<\/code> a \u00e9t\u00e9 d\u00e9plac\u00e9e dans un package diff\u00e9rent dans React version 15.5<\/a>. Il nous conseille d’utiliser la biblioth\u00e8que prop-types \u00e0 la place.<\/p>\n

Il vous donne m\u00eame un lien vers le r\u00e9f\u00e9rentiel npm pour la biblioth\u00e8que prop-types<\/a>. Alors allons-y et installons la biblioth\u00e8que prop-types.<\/p>\n

npm install --save prop-types\n<\/code><\/pre>\n
En haut de notre document, importons la prop-types<\/code>biblioth\u00e8que. La mani\u00e8re moderne de proc\u00e9der nous obligerait \u00e0 utiliser la<\/a> [import](https:\/\/mattwatson.codes\/converting-react-createclass-to-react-component\/)<\/code> syntaxe<\/a>, mais pour l’instant, gardons la m\u00eame syntaxe ajout\u00e9e var PropTypes = require('prop-types');<\/code>au document ci-dessous o\u00f9 nous d\u00e9clarons React<\/code>. La d\u00e9claration d’ouverture devrait maintenant ressembler \u00e0 ceci\u00a0:<\/p>\n
'use strict';\nvar React     = require('react');\nvar PropTypes = require('prop-types');\n\nmodule.exports = React.createClass({\n    displayName: 'CheckBoxList',\n\n    propTypes: {\n        defaultData: React.PropTypes.array,\n        onChange: React.PropTypes.func\n    },\n...\n<\/code><\/pre>\n
Super truc! Cependant, nous recevons toujours le 'array' of undefined<\/code>message d’erreur. Eh bien, c’est parce que la syntaxe utilis\u00e9e est React.PropTypes.array<\/code>et nous venons de d\u00e9clarer nos PropTypes pour utiliser la variable PropTypes<\/code>. La solution simple consiste donc \u00e0 rechercher et \u00e0 remplacer toutes les instances de React.PropTypes<\/code>par PropTypes<\/code>.<\/p>\n
Notre bloc de code d’ouverture devrait maintenant ressembler \u00e0 ceci\u00a0:<\/p>\n
'use strict';\nvar React     = require('react');\nvar PropTypes = require('prop-types');\n\nmodule.exports = React.createClass({\n    displayName: 'CheckBoxList',\n\n    propTypes: {\n        defaultData: PropTypes.array,\n        onChange: PropTypes.func\n    },\n...\n<\/code><\/pre>\n
Et voil\u00e0, notre probl\u00e8me PropTypes est maintenant r\u00e9solu! Rafra\u00eechissons notre composant et voyons si cela fonctionne.<\/p>\n
Non, nous obtenons maintenant l’erreurUncaught TypeError: React.createClass is not a function.<\/code><\/p>\n
\"Composant\"ComposantErreur de type non intercept\u00e9e\u00a0: React.createClass n’est pas une fonction.\ufeff<\/p>\n
Encore une fois, une petite recherche autour de la documentation React et des notes de version pour la v15.5.0<\/a> nous montre qu’elle React.createClass<\/code>a \u00e9t\u00e9 d\u00e9pr\u00e9ci\u00e9e dans la version 15.5.0.<\/p>\n
Avec React.PropTypes<\/code>, React.createClass<\/code>a \u00e9t\u00e9 refactoris\u00e9 dans son propre package, car la m\u00e9thode pr\u00e9f\u00e9r\u00e9e de cr\u00e9ation de composants React utilise<\/a> [React.Component](https:\/\/mattwatson.codes\/converting-react-createclass-to-react-component\/)<\/code>.<\/p>\n
Le rempla\u00e7ant de React.createClass est maintenant dans son propre r\u00e9f\u00e9rentiel npm en tant que create-react-class<\/a>. Alors allons-y et installons ceci dans notre build.<\/p>\n
npm install --save create-react-class\n<\/code><\/pre>\n
Nous devons importer le package dans notre build, en conservant \u00e0 nouveau la syntaxe au format classique et en ajoutant la ligne var CreateReactClass = require('create-react-class');<\/code>en haut du document, comme suit\u00a0:<\/p>\n
'use strict';\nvar React            = require('react');\nvar PropTypes        = require('prop-types');\nvar CreateReactClass = require('create-react-class');\n\nmodule.exports = React.createClass({\n    displayName: 'CheckBoxList',\n\n    propTypes: {\n        defaultData: PropTypes.array,\n        onChange: PropTypes.func\n    },\n...\n<\/code><\/pre>\n
Encore une fois, notre erreur ne dispara\u00eetra pas, car nous devons remplacer toutes les instances de React.createClass<\/code>par notre nouvel objet import\u00e9 CreateReactClass<\/code>. Cela devrait ressembler un peu \u00e0 ceci :<\/p>\n
'use strict';\nvar React            = require('react');\nvar PropTypes        = require('prop-types');\nvar CreateReactClass = require('create-react-class');\n\nmodule.exports = CreateReactClass({\n    displayName: 'CheckBoxList',\n\n    propTypes: {\n        defaultData: PropTypes.array,\n        onChange: PropTypes.func\n    },\n...\n<\/code><\/pre>\n
Et c’est tout! Le composant ne produit plus d’erreurs et notre console JavaScript est agr\u00e9able et propre.<\/p>\n
La solution finie ressemble un peu \u00e0 ceci :<\/p>\n
\"ComposantLe composant Patched React Multiple Checklist dans WordPress Gutenberg<\/p>\n
Code source du didacticiel<\/h2>\n
Vous pouvez t\u00e9l\u00e9charger le code source de la version originale et corrig\u00e9e du composant sur GitHub<\/a>. 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 :<\/p>\n
\"ComposantLes fichiers du didacticiel GitHub pour le correctif React.createClass<\/p>\n
Soumettre une demande d’extraction au r\u00e9f\u00e9rentiel d’origine<\/h2>\n
La grande chose \u00e0 propos de la communaut\u00e9 open source est que nous sommes libres de contribuer et d’am\u00e9liorer le code. Voici la Pull Request avec le patch que je viens de cr\u00e9er<\/a> que j’ai soumis \u00e0 Sony An.<\/p>\n
Source d’enregistrement:  wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Si vous construisez des blocs WordPress Gutenberg (ou m\u00eame si vous ne le faites pas), vous essayez peut-\u00eatre de faire fonctionner un composant React tiers dans votre build. Mais s’il s’agit d’un \u00e9l\u00e9ment plus ancien, …<\/p>\n","protected":false},"author":1,"featured_media":224207,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[915,893,717,841],"tags":[1167],"class_list":["post-228535","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-autre","category-code-2","category-developpeur","category-tutoriels","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/228535","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/comments?post=228535"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/228535\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media\/224207"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media?parent=228535"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/categories?post=228535"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/tags?post=228535"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}