Kaputte React.createClass-Komponente? Lass es uns reparieren!

Wenn Sie WordPress-Gutenberg-Blöcke erstellen (oder auch wenn Sie dies nicht tun), versuchen Sie möglicherweise , eine React-Komponente eines Drittanbieters in Ihrem Build zum Laufen zu bringen. Wenn es sich jedoch um ein älteres Element handelt, insbesondere eines, das die veraltete React.createClassMethode verwendet, können Sie stecken bleiben.

Die Dateien, die dieses Tutorial begleiten, befinden sich in den Ordnern „Original” und „Patch” im Ordner „components” der GitHub-Lösung.

Holen Sie sich Tutorial-Dateien von GitHub

Ich suchte nach einer Kontrollkästchenliste, die es mir ermöglichte, eine Reihe von Optionen zu übergeben (ähnlich wie Sie mehrere Optionen an <SelectControl/>WordPress Gutenberg übergeben könnten). Der eingebaute <CheckboxControl/>hatte keine Option, aber nach einigem Suchen im Internet fand ich [react-checkbox-list](https://github.com/sonyan/react-checkbox-list) Sony An (verfügbar als react-checkbox-listauf npm ).

Dies hat alles getan, was ich wollte, aber nach der Installation über npm (npm install react-checkbox-list --save) hat es nicht funktioniert. Ich wusste, dass ich das Plugin forken und patchen musste.

Beachten Sie, dass dieses Tutorial das Patchen der vorhandenen React.createClassund React.propTypes-Methoden behandelt. Wenn Sie daran interessiert sind zu erfahren, wie man sie mit der bevorzugten Verwendungsmethode [React.Component](https://mattwatson.codes/converting-react-createclass-to-react-component/) patcht, sehen Sie sich bitte den Beitrag zu diesem Thema an.

Patchen der React-Komponente

Das erste Problem, auf das Sie stoßen werden, ist, dass die Komponente nicht einmal geladen wird und Ihnen ein ziemlich böser Uncaught TypeError: Cannot read property 'array' of undefinedFehler angezeigt wird.

Nicht erfasster TypeError, Eigenschaft „Array” von undefiniert kann nicht gelesen werden

Dies liegt daran, dass die Komponente die folgende Zeile enthält defaultData: React.PropTypes.array,und diese React.PropTypesundefiniert ist.

React.PropTypes ist undefiniert

Eine kleine Untersuchung der React-Dokumentation zeigt, dass [React.PropTypes](https://reactjs.org/docs/typechecking-with-proptypes.html) sie in React Version 15.5 in ein anderes Paket verschoben wurde. Es rät uns, stattdessen die Prop-Types-Bibliothek zu verwenden.

Es gibt Ihnen sogar einen Link zum npm-Repository für die Prop-Types-Bibliothek. Also lass uns weitermachen und die Prop-Types-Bibliothek installieren.

npm install --save prop-types

prop-typesLassen Sie uns oben in unserem Dokument die Bibliothek importieren. Die moderne Methode würde uns dazu bringen, die [import](https://mattwatson.codes/converting-react-createclass-to-react-component/) Syntax zu verwenden, aber lassen Sie uns vorerst bei derselben Syntax bleiben, die var PropTypes = require('prop-types');dem Dokument unten hinzugefügt wird, in dem wir deklarieren React. Die Eröffnungserklärung sollte nun ungefähr so ​​aussehen:

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

Tolles Zeug! Trotzdem bekommen wir die 'array' of undefinedFehlermeldung. Nun, das liegt daran, dass die verwendete Syntax ist React.PropTypes.arrayund wir gerade unsere PropTypes deklariert haben, um die Variable zu verwenden PropTypes. Die einfache Lösung besteht also darin, alle Instanzen von zu finden und durch zu React.PropTypesersetzen PropTypes.

Unser öffnender Codeblock sollte nun so aussehen:

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

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

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

Los geht’s, unser PropTypes-Problem ist jetzt gelöst! Lassen Sie uns unsere Komponente aktualisieren und sehen, ob sie funktioniert.

Nein, wir bekommen jetzt den FehlerUncaught TypeError: React.createClass is not a function.

Nicht erfasster TypeError: React.createClass ist keine Funktion.

Auch hier zeigt uns eine kleine Suche in der React-Dokumentation und den Versionshinweisen für v15.5.0React.createClass, dass in Version 15.5.0 abgewertet wurde.

Zusammen mit wurde React.PropTypes, React.createClassin ein eigenes Paket umgestaltet, da die bevorzugte Methode zum Erstellen von React-Komponenten [React.Component](https://mattwatson.codes/converting-react-createclass-to-react-component/).

Der Ersatz für React.createClass befindet sich jetzt in einem eigenen npm-Repository als create-react-class. Also lassen Sie uns weitermachen und dies in unseren Build installieren.

npm install --save create-react-class

Wir müssen das Paket in unseren Build importieren, wobei wir die Syntax wieder im klassischen Format beibehalten und die Zeile var CreateReactClass = require('create-react-class');am Anfang des Dokuments hinzufügen, wie folgt:

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

Auch hier wird unser Fehler nicht verschwinden, da wir alle Instanzen von React.createClassdurch unser neu importiertes Objekt ersetzen müssen CreateReactClass. Das sollte ungefähr so ​​aussehen:

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

Und das ist es! Die Komponente schlägt nicht mehr fehl und unsere JavaScript-Konsole ist schön und sauber.

Die fertige Lösung sieht ungefähr so ​​aus:

Die gepatchte React Multiple Checklist-Komponente in WordPress Gutenberg

Tutorial-Quellcode

Sie können den Quellcode für die ursprüngliche und die gepatchte Version der Komponente auf GitHub herunterladen. Das Plugin enthält einen WordPress-Gutenberg-Block, mit dem Sie mit dem Code herumspielen können, mit drei Dateien, die Sie gegebenenfalls löschen können:

Die GitHub-Lernprogrammdateien für den React.createClass-Patch

Senden einer Pull-Anforderung an das ursprüngliche Repository

Das Tolle an der Open-Source-Community ist, dass wir frei sind, Code beizutragen und zu verbessern. Hier ist der Pull-Request mit dem gerade erstellten Patch, den ich an Sony An gesendet habe.