Conversion de React.createClass en React.Component

Last updated Nov 9, 2022

Teneur

Dans mon dernier article, j’ai parlé de patcher les anciennes versions de React pour qu’elles fonctionnent dans un environnement moderne. Dans cet article, je vais un peu plus loin et donne un guide étape par étape pour mettre à niveau un composant React classique vers un composant moderne, en changeant la React.createClassfaçon de faire les choses pour la méthode moderne et préférée React.Component.

Les fichiers dont nous avons besoin se trouveront dans les dossiers « Original » et « Final » du répertoire des composants dans la solution GitHub qui l’accompagne.

Obtenir des fichiers de didacticiel à partir de GitHub

Encore une fois travailler avec le composant [react-checkbox-list](https://github.com/sonyan/react-checkbox-list) de Sony An (disponible comme react-checkbox-listsur npm ). Ce guide vous montre étape par étape comment remplacer la structure et les méthodes d’un composant classique par un React.createClasscomposant moderne React.Component.

En commençant par le .jsxfichier dans la react-checkbox-listsolution, nous allons d’abord supprimer le .jsfichier et le renommer .jscar les .jsxfichiers n’ont plus besoin d’être nommés différemment.

Cela nous donne le code de démarrage suivant :

Conversion du composant

Lorsque vous essayez de charger ce code, la première erreur que nous obtenons estUncaught Error: Module build failed: SyntaxError: The @jsx React.DOM pragma has been deprecated as of React 0.12

Erreur non interceptée : Échec de la construction du module : Erreur de syntaxe : Le pragma @jsx React.DOM est obsolète depuis React 0.12

Il est assez simple de corriger cela. Supprimez simplement la ligne /** @jsx React.DOM */du haut du document.

Nous obtenons maintenant la même erreur Uncaught TypeError: Cannot read property 'array' of undefinedque dans le didacticiel sur les correctifs. En effet, React.propTypes était obsolète dans la version 15.50 de React. Par conséquent, conformément à 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/)


npm install --save prop-types

Ce qui suit maintenant est une refonte complète de la base de code, nous ne pouvons donc pas actualiser et corriger une erreur comme nous l’avons peut-être fait précédemment, nous ne saurons donc pas si cela a fonctionné jusqu’à la toute fin. Bouclez votre ceinture !

Commençons par remplacer la React.createClassfonction en déclarant un new React.Component. Modifiez notre code pour qu’il ressemble à ceci :


'use strict';
import React from 'react';

class CheckBoxList extends React.Component {
...
}

Notez que nous avons fait quelques choses ici :

Suppression du commentaire d’ouverture JSX
Modifié le type de déclaration de var React =...à import React from 'react';c’est la façon moderne de faire des déclarations dans React.
Nous déclarons maintenant une nouvelle classe de CheckBoxList, au lieu d’exporter une fonction.
En raison de la syntaxe de l’objet maintenant entre parenthèses, {...}nous devons supprimer la fermeture);

Cependant, il manque maintenant à cette nouvelle classe un moyen d’être exportée afin que d’autres composants puissent l’utiliser, alors ajoutons une déclaration d’exportation au bas de ce code.


'use strict';
import React from 'react';

class CheckBoxList extends React.Component {
...
}

export default CheckBoxList;

Dans notre code d’origine, la première ligne de code de la fonction était displayName: 'CheckBoxList',notre exportation qui gère maintenant cela, nous pouvons donc supprimer complètement ce code.

La ligne suivante déclare que ceux- propTypesci se trouvent maintenant en dehors de la classe et ont besoin de la PropTypesdépendance que nous avons ajoutée via npm. Ajoutons cela dans nos importations et écrivons les PropTypes comme suit :


'use strict';
import React from 'react';
import PropTypes from 'prop-types';

class CheckBoxList extends React.Component {
...
}

CheckBoxList.propTypes = {
    defaultData: PropTypes.array,
    onChange: PropTypes.func,
};

export default CheckBoxList;

Ensuite, l’état est déclaré via la méthode getInitialStateavec React.Componentnous définissons notre état initial avec un constructeur. Ajoutez le code suivant dans notre build :


...
class CheckBoxList extends React.Component {
    constructor( props) {
        super( props );
        this.state = {
            data: [],
        }
    }
...
}
...

Voilà, cela définit l’état du composant, mais attendez, nous ne lui avons pas dit d’où il devait obtenir son état. C’est là que ça componentWillMountdevient pratique.


...
class CheckBoxList extends React.Component {
    constructor( props) {
        super( props );
        this.state = {
            data: [],
        }
    }

    componentWillMount() {
        this.setState({
            data: this.props.defaultData,
        });
    }
...
}
...

Une chose importante à noter est que les méthodes internes de React.Componentne se terminent pas par des virgules (,), alors assurez-vous que toutes les méthodes que vous ajoutez au composant ne se terminent pas par une virgule !

Ensuite, rajoutons la fonction de rendu. C’est probablement la partie la plus simple, c’est presque la même chose, avec la différence clé que nous changeons render: function() {en juste render() {.

Dans le but de garder ce tutoriel au point, je ne convertirai pas les deux méthodes resetet checkAllcependant les concepts utilisés pour le port de la méthode handleItemChangeapple aux deux, alors n’hésitez pas à les essayer vous-même.

Pour migrer la handleItemChangeméthode, nous devons d’abord supprimer la virgule fermante (,) et modifier le type de déclaration de fonction de handleItemChange: function(e) {pour handleItemChange( e) {nous assurer que nous le transmettons toujours een tant que paramètre d’événement.

Ajoutons cela au-dessus de notre méthode de rendu.


...
class CheckBoxList extends React.Component {
...
    handleItemChange( e) {
        var selectedValues = [],
            newData = [];

        this.state.data.forEach(function(item) {
            if(item.value == e.target.value) {
                item.checked = e.target.checked;
            }
            if(item.checked) {
                selectedValues.push(item.value);
            }
            newData.push(item);
        });

        this.setState( {data: newData} );

        if(this.props.onChange) {
            this.props.onChange(selectedValues);
        }
    }
...
}
...

Notre composant va maintenant être rendu, mais il ne sera pas fonctionnel. Lorsque vous essayez de cliquer sur une case à cocher, vous obtenez l’erreur Uncaught TypeError: Cannot read property 'state' of undefined.

Erreur de type non interceptée : impossible de lire la propriété ‘état’ de undefined

C’est parce que dans notre handleItemChangeméthode, où nous essayons d’accéder à l’état, thisn’est pas défini. Pour résoudre ce problème, nous devons lier notre fonction à thisen ajoutant la ligne suivante dans notre constructeur : this.handleItemChange = this.handleItemChange.bind( this );.


...
class CheckBoxList extends React.Component {
    constructor( props) {
        super( props );
        this.state = {
            data: [],
        }
        this.handleItemChange = this.handleItemChange.bind( this );
    }
...
}
...

Et voilà, notre composant React nouvellement converti en action.

React.createClass à React.Component

Code source du didacticiel

Vous pouvez télécharger le code source de la version originale et finale du composant sur GitHub. 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 :

Les fichiers du didacticiel GitHub pour la conversion de React.createClass en React.Component

Source d’enregistrement: wholesomecode.ltd