Trasig React.createClass-komponent? Låt oss fixa det!
Om du bygger WordPress Gutenberg-block (eller även om du inte gör det) kanske du försöker få en tredje parts React Component att fungera i din build. Men om det är ett äldre element, specifikt ett som använder den föråldrade React.createClassmetoden, kan du fastna.
Filerna som följer med den här handledningen finns i originalmapparna och de korrigerade mapparna i komponentmappen i GitHub-lösningen.
Få handledningsfiler från GitHub
Jag letade efter en kryssrutelista som tillät mig att skicka en rad alternativ (liknande hur du kan skicka flera alternativ till <SelectControl/>i WordPress Gutenberg). Den inbyggda <CheckboxControl/>hade inget alternativ, men efter lite sökning på webben hittade jag [react-checkbox-list](https://github.com/sonyan/react-checkbox-list) av Sony An (tillgänglig som react-checkbox-listpå npm ).
Detta gjorde allt jag ville att det skulle göra, men efter att ha installerat det via npm (npm install react-checkbox-list --save) fungerade det inte. Jag visste att jag skulle behöva punga och lappa insticksprogrammet.
Observera att den här handledningen täcker korrigering av befintliga React.createClassoch React.propTypesmetoder. Om du är intresserad av att lära dig hur du lappar dem med den föredragna metoden att använda [React.Component](https://mattwatson.codes/converting-react-createclass-to-react-component/) , se inlägget om det ämnet.
Patcha React-komponenten
Det första problemet du kommer att stöta på är att komponenten inte ens kommer att laddas, och du kommer att presenteras med ett ganska otäckt Uncaught TypeError: Cannot read property 'array' of undefinedfel.
Uncaught TypeError, kan inte läsa egenskapen ‘array’ för undefined
Detta beror på att komponenten innehåller följande rad defaultData: React.PropTypes.array,och det är för React.PropTypesatt den är odefinierad.
React.PropTypes är odefinierat
Lite granskning av React-dokumentationen visar att den [React.PropTypes](https://reactjs.org/docs/typechecking-with-proptypes.html) flyttade till ett annat paket i React version 15.5. Det råder oss att använda biblioteket med prop-typer istället.
Det ger dig till och med en länk till npm-förvaret för biblioteket för prop-typer. Så låt oss gå vidare och installera prop-types-biblioteket.
npm install --save prop-types
Överst i vårt dokument, låt oss importera prop-typesbiblioteket. Det moderna sättet för detta skulle få oss att använda [import](https://mattwatson.codes/converting-react-createclass-to-react-component/) syntaxen, men låt oss för närvarande fortsätta att lägga var PropTypes = require('prop-types');till samma syntax i dokumentet nedan där vi deklarerar React. Inledningsdeklarationen bör nu se ut ungefär så här:
'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
},
...
Bra saker! Men vi får fortfarande 'array' of undefinedfelmeddelandet. Jo det beror på att syntaxen som används är React.PropTypes.arrayoch vi har precis deklarerat att våra PropTypes använder variabeln PropTypes. Så den enkla fixen är att hitta och ersätta alla instanser av React.PropTypesmed PropTypes.
Vårt öppningsblock med kod bör nu se ut så här:
'use strict';
var React = require('react');
var PropTypes = require('prop-types');
module.exports = React.createClass({
displayName: 'CheckBoxList',
propTypes: {
defaultData: PropTypes.array,
onChange: PropTypes.func
},
...
Där går vi, vårt PropTypes-problem är nu löst! Låt oss uppdatera vår komponent och se om den fungerar.
Nej, nu får vi feletUncaught TypeError: React.createClass is not a function.
Uncaught TypeError: React.createClass är inte en funktion.
Återigen, en liten sökning runt React-dokumentationen och release notes för v15.5.0 visar oss att React.createClassdet avskrivs i version 15.5.0.
Tillsammans med React.PropTypes, React.createClassomstrukturerades till ett eget paket, eftersom den föredragna metoden för att skapa React Components använder [React.Component](https://mattwatson.codes/converting-react-createclass-to-react-component/).
Ersättningen för React.createClass finns nu i sitt eget npm-förråd som create-react-class. Så låt oss gå vidare och installera detta i vår build.
npm install --save create-react-class
Vi måste importera paketet till vår build, återigen behålla syntaxen i det klassiska formatet och lägg till raden var CreateReactClass = require('create-react-class');högst upp i dokumentet, så här:
'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
},
...
Återigen, vårt fel kommer inte att försvinna, eftersom vi måste ersätta alla instanser av React.createClassmed vårt nya importerade objekt CreateReactClass. Det borde se ut lite så här:
'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
},
...
Och det är allt! Komponenten har inte längre fel, och vår JavaScript-konsol är snygg och ren.
Den färdiga lösningen ser ut ungefär så här:
Komponenten för patchad React Multiple Checklist i WordPress Gutenberg
Handlednings källkod
Du kan ladda ner källkoden för den ursprungliga och korrigerade versionen av komponenten på GitHub. Pluginet innehåller ett WordPress Gutenberg-block som du kan använda för att leka med koden, med tre filer som du kan ta bort i förekommande fall:
GitHub Tutorial-filer för React.createClass-patchen
Skicka en Pull-förfrågan till originalförrådet
Det fina med öppen källkodsgemenskapen är att vi är fria att bidra och förbättra kod. Här är Pull Request med patchen som jag just har skapat som jag har skickat till Sony An.