{"id":228877,"date":"2022-10-12T18:54:00","date_gmt":"2022-10-12T15:54:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228877"},"modified":"2022-11-09T04:38:08","modified_gmt":"2022-11-09T01:38:08","slug":"conversione-di-react-createclass-in-react-component","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/conversione-di-react-createclass-in-react-component\/","title":{"rendered":"Conversione di React.createClass in React.Component"},"content":{"rendered":"\n

Nel mio ultimo articolo ho parlato dell’applicazione di patch alle versioni precedenti di React per funzionare in un ambiente moderno<\/a>. In questo articolo vado oltre e fornisco una guida passo passo per aggiornare un componente React classico a uno moderno, cambiando il React.createClass<\/code>modo di fare le cose al metodo moderno e preferito React.Component<\/code>.<\/p>\n

I file di cui abbiamo bisogno saranno nelle cartelle "Originale" e "Finale" della directory dei componenti nella soluzione GitHub di accompagnamento.<\/p>\n

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

Sempre funzionante con il componente [react-checkbox-list](https:\/\/github.com\/sonyan\/react-checkbox-list)<\/code> Sony An<\/a> (disponibile come react-checkbox-list<\/code>su npm<\/a> ). Questa guida ti mostra passo dopo passo come sostituire la struttura ei metodi di un React.createClass<\/code>componente classico con uno moderno React.Component<\/code>.<\/p>\n

A partire dal .jsx<\/code>file nella react-checkbox-list<\/code>soluzione, elimineremo prima il .js<\/code>file e lo rinomineremo in .js<\/code>quanto .jsx<\/code>non \u00e8 pi\u00f9 necessario nominare i file in modo diverso.<\/p>\n

Questo ci d\u00e0 il seguente codice di partenza:<\/p>\n

\n'use strict';\nvar React = require('react');\n\nmodule.exports = React.createClass({\n    displayName: 'CheckBoxList',\n\n    propTypes: {\n        defaultData: React.PropTypes.array,\n        onChange: React.PropTypes.func\n    },\n\n    getInitialState: function() {\n        return {\n            data: this.props.defaultData || []\n        };\n    },\n\n    handleItemChange: function(e) {\n        var selectedValues = [],\n            newData = [];\n\n        this.state.data.forEach(function(item) {\n            if(item.value === e.target.value) {\n                item.checked = e.target.checked;\n            }\n            if(item.checked) {\n                selectedValues.push(item.value);\n            }\n            newData.push(item);\n        });\n\n        this.setState({data: newData});\n\n        if(this.props.onChange) {\n            this.props.onChange(selectedValues);\n        }\n    },\n\n    reset: function() {\n        var newData = [];\n        this.state.data.forEach(function(item) {\n            item.checked = false;\n            newData.push(item);\n        });\n\n        this.setState({data: newData});\n    },\n\n    checkAll: function() {\n        var newData = [];\n        this.state.data.forEach(function(item) {\n            item.checked = true;\n            newData.push(item);\n        });\n\n        this.setState({data: newData});\n    },\n\n    render: function() {\n        var options;\n\n        options = this.state.data.map(function(item, index) {\n            return (<div key={'chk-' + index} className=\"checkbox\">\n                    <label>\n                        <input\n                            type=\"checkbox\"\n                            value={item.value}\n                            onChange={this.handleItemChange}\n                            checked={item.checked? true: false} \/> {item.label}\n                    <\/label>\n                <\/div>\n            );\n        }.bind(this));\n\n        return (<div>\n                {options}\n            <\/div>\n        );\n    }\n});\n<\/code><\/pre>\n
Conversione del componente<\/h2>\n
Quando proviamo a caricare questo codice, il primo errore che otteniamo \u00e8Uncaught Error: Module build failed: SyntaxError: The @jsx React.DOM pragma has been deprecated as of React 0.12<\/code><\/p>\n
Errore non rilevato: build del modulo non riuscita: SyntaxError: il pragma @jsx<\/a> React.DOM \u00e8 stato deprecato a partire da React 0.12<\/p>\n
\u00c8 abbastanza semplice correggere questo. Basta rimuovere la linea \/** @jsx React.DOM *\/<\/code>dalla parte superiore del documento.<\/p>\n
Ora otteniamo l’errore Uncaught TypeError: Cannot read property 'array' of undefined<\/code>come nel tutorial sull’applicazione delle<\/a> patch<\/a>. Questo perch\u00e9 React.propTypes \u00e8 stato deprecato in React versione 15.50, quindi come da quel tutorial, vai avanti e installa il pacchetto PropTypes con il comando tramite npm. Lo importeremo nel nostro pacchetto in seguito.[React.createClass](https:\/\/wholesomecode.ltd\/blog\/broken-react-createclass-component-lets-fix-it\/)<\/code><\/a><\/p>\n
npm install --save prop-types\n<\/code><\/pre>\n
Quello che segue ora \u00e8 una revisione completa della base di codice, quindi non possiamo aggiornare e correggere un errore come avremmo potuto fare in precedenza, quindi non sapremo se ha funzionato fino alla fine. Allaccia le cinture!<\/p>\n
Iniziamo sostituendo la React.createClass<\/code>funzione dichiarando un nuovo React.Component<\/code>. Modifica il nostro codice in modo che appaia come segue:<\/p>\n
'use strict';\nimport React from 'react';\n\nclass CheckBoxList extends React.Component {\n...\n}\n<\/code><\/pre>\n
Nota che abbiamo fatto alcune cose qui:<\/p>\n