{"id":228527,"date":"2022-10-12T18:04:00","date_gmt":"2022-10-12T15:04:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228527"},"modified":"2022-11-09T02:52:02","modified_gmt":"2022-11-08T23:52:02","slug":"conversion-de-react-createclass-en-react-component","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/conversion-de-react-createclass-en-react-component\/","title":{"rendered":"Conversion de React.createClass en React.Component"},"content":{"rendered":"\n

Dans mon dernier article, j’ai parl\u00e9 de patcher les anciennes versions de React pour qu’elles fonctionnent dans un environnement moderne<\/a>. Dans cet article, je vais un peu plus loin et donne un guide \u00e9tape par \u00e9tape pour mettre \u00e0 niveau un composant React classique vers un composant moderne, en changeant la React.createClass<\/code>fa\u00e7on de faire les choses pour la m\u00e9thode moderne et pr\u00e9f\u00e9r\u00e9e React.Component<\/code>.<\/p>\n

Les fichiers dont nous avons besoin se trouveront dans les dossiers \u00ab\u00a0Original\u00a0\u00bb et \u00ab\u00a0Final\u00a0\u00bb du r\u00e9pertoire des composants dans la solution GitHub qui l’accompagne.<\/p>\n

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

Encore une fois travailler avec le composant [react-checkbox-list](https:\/\/github.com\/sonyan\/react-checkbox-list)<\/code> de Sony An<\/a> (disponible comme react-checkbox-list<\/code>sur npm<\/a> ). Ce guide vous montre \u00e9tape par \u00e9tape comment remplacer la structure et les m\u00e9thodes d’un composant classique par un React.createClass<\/code>composant moderne React.Component<\/code>.<\/p>\n

En commen\u00e7ant par le .jsx<\/code>fichier dans la react-checkbox-list<\/code>solution, nous allons d’abord supprimer le .js<\/code>fichier et le renommer .js<\/code>car les .jsx<\/code>fichiers n’ont plus besoin d’\u00eatre nomm\u00e9s diff\u00e9remment.<\/p>\n

Cela nous donne le code de d\u00e9marrage suivant\u00a0:<\/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
Conversion du composant<\/h2>\n
Lorsque vous essayez de charger ce code, la premi\u00e8re erreur que nous obtenons estUncaught Error: Module build failed: SyntaxError: The @jsx React.DOM pragma has been deprecated as of React 0.12<\/code><\/p>\n
Erreur non intercept\u00e9e\u00a0: \u00c9chec de la construction du module\u00a0: Erreur de syntaxe\u00a0: Le pragma @jsx<\/a> React.DOM est obsol\u00e8te depuis React 0.12<\/p>\n
Il est assez simple de corriger cela. Supprimez simplement la ligne \/** @jsx React.DOM *\/<\/code>du haut du document.<\/p>\n
Nous obtenons maintenant la m\u00eame erreur Uncaught TypeError: Cannot read property 'array' of undefined<\/code>que dans le didacticiel sur les<\/a> correctifs<\/a>. En effet, React.propTypes \u00e9tait obsol\u00e8te dans la version 15.50 de React. Par cons\u00e9quent, conform\u00e9ment \u00e0 ce didacticiel, continuez et installez le package PropTypes avec la commande via npm. Nous l’importerons dans notre package plus tard.[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
Ce qui suit maintenant est une refonte compl\u00e8te de la base de code, nous ne pouvons donc pas actualiser et corriger une erreur comme nous l’avons peut-\u00eatre fait pr\u00e9c\u00e9demment, nous ne saurons donc pas si cela a fonctionn\u00e9 jusqu’\u00e0 la toute fin. Bouclez votre ceinture\u00a0!<\/p>\n
Commen\u00e7ons par remplacer la React.createClass<\/code>fonction en d\u00e9clarant un new React.Component<\/code>. Modifiez notre code pour qu’il ressemble \u00e0 ceci\u00a0:<\/p>\n
'use strict';\nimport React from 'react';\n\nclass CheckBoxList extends React.Component {\n...\n}\n<\/code><\/pre>\n
Notez que nous avons fait quelques choses ici :<\/p>\n