Componente React.createClass rotto? Risolviamolo!

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 si tratta di un elemento più vecchio, in particolare uno che utilizza il React.createClassmetodo deprecato, potresti rimanere bloccato.

I file che accompagnano questo tutorial si trovano nelle cartelle originali e corrette nella cartella dei componenti della soluzione GitHub.

Ottieni file tutorial da GitHub

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

Questo ha fatto tutto ciò che volevo che facesse, ma dopo averlo installato tramite npm (npm install react-checkbox-list --save) non ha funzionato. Sapevo che avrei dovuto eseguire il fork e patchare il plugin.

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

Patch del componente React

Il primo problema che incontrerai è che il componente non verrà nemmeno caricato e ti verrà presentato un Uncaught TypeError: Cannot read property 'array' of undefinederrore piuttosto brutto.

TypeError non rilevato, impossibile leggere la proprietà ‘array’ di undefined

Ciò è dovuto al fatto che il componente contiene la riga seguente defaultData: React.PropTypes.array,ed è perché React.PropTypesnon è definito.

React.PropTypes non è definito

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

Ti dà anche un collegamento al repository npm per la libreria prop-types. Quindi andiamo avanti e installiamo la libreria prop-types.

npm install --save prop-types

Nella parte superiore del nostro documento, importiamo la prop-typeslibreria. Il modo moderno di questo ci vorrebbe usare la [import](https://mattwatson.codes/converting-react-createclass-to-react-component/) sintassi, ma per ora, manteniamo la stessa sintassi aggiunta var PropTypes = require('prop-types');al documento seguente in cui dichiariamo React. La dichiarazione di apertura ora dovrebbe assomigliare a qualcosa del genere:

'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
    },
...

Roba fantastica! Tuttavia riceviamo ancora il 'array' of undefinedmessaggio di errore. Bene, questo perché la sintassi utilizzata è React.PropTypes.arraye abbiamo appena dichiarato che i nostri PropTypes utilizzano la variabile PropTypes. Quindi la soluzione semplice è trovare e sostituire tutte le istanze di React.PropTypescon PropTypes.

Il nostro blocco di codice di apertura dovrebbe ora assomigliare a questo:

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

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

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

Ecco fatto, il nostro problema con PropTypes è stato risolto! Aggiorna il nostro componente e vediamo se funziona.

No, ora otteniamo l’erroreUncaught TypeError: React.createClass is not a function.

Errore di tipo non rilevato: React.createClass non è una funzione.

Ancora una volta, una piccola ricerca nella documentazione di React e nelle note di rilascio per v15.5.0 ci mostra che React.createClassè stato deprezzato nella versione 15.5.0.

Insieme a React.PropTypes, React.createClassè stato rifattorizzato nel proprio pacchetto, poiché il metodo preferito per la creazione di componenti React utilizza [React.Component](https://mattwatson.codes/converting-react-createclass-to-react-component/).

La sostituzione di React.createClass è ora nel proprio repository npm come create-react-class. Quindi andiamo avanti e installiamo questo nella nostra build.

npm install --save create-react-class

Dobbiamo importare il pacchetto nella nostra build, sempre mantenendo la sintassi nel formato classico aggiungere la riga var CreateReactClass = require('create-react-class');all’inizio del documento, in questo modo:

'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
    },
...

Ancora una volta, il nostro errore non andrà via, perché dobbiamo sostituire tutte le istanze di React.createClasscon il nostro nuovo oggetto importato CreateReactClass. Dovrebbe assomigliare un po’ a questo:

'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
    },
...

E questo è tutto! Il componente non ha più errori e la nostra console JavaScript è bella e pulita.

La soluzione finita assomiglia un po’ a questa:

Il componente Patched React Multiple Checklist in WordPress Gutenberg

Codice sorgente dell’esercitazione

Puoi scaricare il codice sorgente per la versione originale e con patch del componente su GitHub. 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:

I file del tutorial di GitHub per la patch React.createClass

Invio di una richiesta pull al repository originale

Il bello della comunità open source è che siamo liberi di contribuire e migliorare il codice. Ecco la Pull Request con la patch che ho appena creato e che ho inviato a Sony An.