{"id":228891,"date":"2022-10-12T11:10:00","date_gmt":"2022-10-12T08:10:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228891"},"modified":"2022-11-09T04:40:48","modified_gmt":"2022-11-09T01:40:48","slug":"componente-react-createclass-rotto-risolviamolo","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/componente-react-createclass-rotto-risolviamolo\/","title":{"rendered":"Componente React.createClass rotto? Risolviamolo!"},"content":{"rendered":"\n

Se stai costruendo blocchi Gutenberg di WordPress (o anche se non lo sei) potresti provare a far funzionare un componente React di terze parti nella tua build<\/a>. Ma se si tratta di un elemento pi\u00f9 vecchio, in particolare uno che utilizza il React.createClass<\/code>metodo deprecato, potresti rimanere bloccato.<\/p>\n

I file che accompagnano questo tutorial si trovano nelle cartelle originali e corrette nella cartella dei componenti della soluzione GitHub.<\/p>\n

Ottieni file tutorial da GitHub<\/a><\/p>\n

Stavo cercando un elenco di caselle di controllo che mi permettesse di passare una serie di opzioni (simile a come potresti passare pi\u00f9 opzioni a <SelectControl\/><\/code>Gutenberg in WordPress). Il built-in <CheckboxControl\/><\/code>non aveva un’opzione, ma dopo alcune ricerche sul web ho trovato [react-checkbox-list](https:\/\/github.com\/sonyan\/react-checkbox-list)<\/code> da Sony An<\/a> (disponibile come react-checkbox-list<\/code>su npm<\/a> ).<\/p>\n

Questo ha fatto tutto ci\u00f2 che volevo che facesse, ma dopo averlo installato tramite npm (npm install react-checkbox-list --save<\/code>) non ha funzionato. Sapevo che avrei dovuto eseguire il fork e patchare il plugin.<\/p>\n

Nota che questo tutorial copre l’applicazione di patch ai metodi esistenti React.createClass<\/code>e. Se sei interessato a imparare come correggerli con il metodo di utilizzo preferito<\/a> , guarda il post su quell’argomento<\/a>.React.propTypes<\/code><\/a> [React.Component](https:\/\/mattwatson.codes\/converting-react-createclass-to-react-component\/)<\/code><\/a><\/p>\n

Patch del componente React<\/h2>\n

Il primo problema che incontrerai \u00e8 che il componente non verr\u00e0 nemmeno caricato e ti verr\u00e0 presentato un Uncaught TypeError: Cannot read property 'array' of undefined<\/code>errore piuttosto brutto.<\/p>\n

TypeError non rilevato, impossibile leggere la propriet\u00e0 ‘array’ di undefined<\/p>\n

Ci\u00f2 \u00e8 dovuto al fatto che il componente contiene la riga seguente defaultData: React.PropTypes.array,<\/code>ed \u00e8 perch\u00e9 React.PropTypes<\/code>non \u00e8 definito.<\/p>\n

\"ComponenteReact.PropTypes non \u00e8 definito<\/p>\n

Un po’ di indagine sulla documentazione di React mostra che<\/a> [React.PropTypes](https:\/\/reactjs.org\/docs\/typechecking-with-proptypes.html)<\/code> \u00e8 stato spostato in un pacchetto diverso in React versione 15.5<\/a>. Ci consiglia invece di usare la libreria prop-types.<\/p>\n

Ti d\u00e0 anche un collegamento al repository npm per la libreria prop-types<\/a>. Quindi andiamo avanti e installiamo la libreria prop-types.<\/p>\n

npm install --save prop-types\n<\/code><\/pre>\n
Nella parte superiore del nostro documento, importiamo la prop-types<\/code>libreria. Il modo moderno di questo ci vorrebbe usare la<\/a> [import](https:\/\/mattwatson.codes\/converting-react-createclass-to-react-component\/)<\/code> sintassi<\/a>, ma per ora, manteniamo la stessa sintassi aggiunta var PropTypes = require('prop-types');<\/code>al documento seguente in cui dichiariamo React<\/code>. La dichiarazione di apertura ora dovrebbe assomigliare a qualcosa del genere:<\/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
Roba fantastica! Tuttavia riceviamo ancora il 'array' of undefined<\/code>messaggio di errore. Bene, questo perch\u00e9 la sintassi utilizzata \u00e8 React.PropTypes.array<\/code>e abbiamo appena dichiarato che i nostri PropTypes utilizzano la variabile PropTypes<\/code>. Quindi la soluzione semplice \u00e8 trovare e sostituire tutte le istanze di React.PropTypes<\/code>con PropTypes<\/code>.<\/p>\n
Il nostro blocco di codice di apertura dovrebbe ora assomigliare a questo:<\/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
Ecco fatto, il nostro problema con PropTypes \u00e8 stato risolto! Aggiorna il nostro componente e vediamo se funziona.<\/p>\n
No, ora otteniamo l’erroreUncaught TypeError: React.createClass is not a function.<\/code><\/p>\n
\"Componente\"ComponenteErrore di tipo non rilevato: React.createClass non \u00e8 una funzione.\ufeff<\/p>\n
Ancora una volta, una piccola ricerca nella documentazione di React e nelle note di rilascio per v15.5.0<\/a> ci mostra che React.createClass<\/code>\u00e8 stato deprezzato nella versione 15.5.0.<\/p>\n
Insieme a React.PropTypes<\/code>, React.createClass<\/code>\u00e8 stato rifattorizzato nel proprio pacchetto, poich\u00e9 il metodo preferito per la creazione di componenti React utilizza<\/a> [React.Component](https:\/\/mattwatson.codes\/converting-react-createclass-to-react-component\/)<\/code>.<\/p>\n
La sostituzione di React.createClass \u00e8 ora nel proprio repository npm come create-react-class<\/a>. Quindi andiamo avanti e installiamo questo nella nostra build.<\/p>\n
npm install --save create-react-class\n<\/code><\/pre>\n
Dobbiamo importare il pacchetto nella nostra build, sempre mantenendo la sintassi nel formato classico aggiungere la riga var CreateReactClass = require('create-react-class');<\/code>all’inizio del documento, in questo modo:<\/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
Ancora una volta, il nostro errore non andr\u00e0 via, perch\u00e9 dobbiamo sostituire tutte le istanze di React.createClass<\/code>con il nostro nuovo oggetto importato CreateReactClass<\/code>. Dovrebbe assomigliare un po’ a questo:<\/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
E questo \u00e8 tutto! Il componente non ha pi\u00f9 errori e la nostra console JavaScript \u00e8 bella e pulita.<\/p>\n
La soluzione finita assomiglia un po’ a questa:<\/p>\n
\"ComponenteIl componente Patched React Multiple Checklist in WordPress Gutenberg<\/p>\n
Codice sorgente dell’esercitazione<\/h2>\n
Puoi scaricare il codice sorgente per la versione originale e con patch del componente su GitHub<\/a>. Il plug-in contiene un blocco Gutenberg di WordPress che puoi utilizzare per giocare con il codice, con tre file che puoi eliminare a seconda dei casi:<\/p>\n
\"ComponenteI file del tutorial di GitHub per la patch React.createClass<\/p>\n
Invio di una richiesta pull al repository originale<\/h2>\n
Il bello della comunit\u00e0 open source \u00e8 che siamo liberi di contribuire e migliorare il codice. Ecco la Pull Request con la patch che ho appena creato<\/a> e che ho inviato a Sony An.<\/p>\n
Fonte di registrazione:  wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Se stai costruendo blocchi Gutenberg di WordPress (o anche se non lo sei) potresti provare a far funzionare un componente React di terze parti nella tua build. Ma se \u00e8 un elemento pi\u00f9 vecchio, …<\/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":[918,896,720,844],"tags":[1168],"class_list":["post-228891","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-altro","category-codice","category-sviluppatore","category-tutorial","tag-affiai-it"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/228891","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/comments?post=228891"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/228891\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media\/224207"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media?parent=228891"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/categories?post=228891"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/tags?post=228891"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}