Kas React.createClassi komponent on katki? Teeme selle korda!

Viimati uuendatud nov. 9, 2022

Sisu

Tõmbetaotluse esitamine algsesse hoidlasse

Kui loote WordPressi Gutenbergi plokke (või isegi kui te seda ei tee), võite proovida panna oma konstruktsioonis tööle kolmanda osapoole reaktsioonikomponent. Kuid kui see on vanem element, täpsemalt selline, mis kasutab aegunud React.createClassmeetodit, võite takerduda.

Selle õpetusega kaasas olevad failid on GitHubi lahenduse komponentide kaustas originaal- ja paigatud kaustades.

Hankige õpetusfailid GitHubist

Otsisin märkeruutude loendit, mis võimaldas mul edastada mitmesuguseid valikuid (sarnaselt sellele, kuidas saate edastada mitu valikut <SelectControl/>WordPressi Gutenbergi valikule). Sisseehitatud <CheckboxControl/>seadmel ei olnud valikut, kuid pärast mõningast veebist otsimist leidsin [react-checkbox-list](https://github.com/sonyan/react-checkbox-list) Sony An (saadaval react-checkbox-listaadressil npm ).

See tegi kõik, mida ma tahtsin, kuid pärast npm (npm install react-checkbox-list --save) kaudu installimist see ei töötanud. Teadsin, et pean pistikprogrammi paika panema.

Pange tähele, et see õpetus hõlmab olemasolevate React.createClassja React.propTypesmeetodite lappimist. Kui soovite õppida, kuidas neid eelistatud kasutusmeetodiga parandada, [React.Component](https://mattwatson.codes/converting-react-createclass-to-react-component/) vaadake selle teema postitust.

Reaktsioonikomponendi lappimine

Esimene probleem, millega kokku puutute, on see, et komponenti isegi ei laadita ja teile kuvatakse üsna vastik Uncaught TypeError: Cannot read property 'array' of undefinedviga.

Tabamata tüübiviga, määratlemata atribuuti massiivi ei saa lugeda

Selle põhjuseks on asjaolu, et komponent sisaldab järgmist rida defaultData: React.PropTypes.array,ja see React.PropTypeson määratlemata.

React.PropTypes on määramata

Reacti dokumentatsiooni natukene uurimine näitab, et see [React.PropTypes](https://reactjs.org/docs/typechecking-with-proptypes.html) kolis Reacti versioonis 15.5 teise paketti. See soovitab meil selle asemel kasutada prop-types teeki.

See annab teile isegi lingi prop-types teegi npm hoidlasse. Nii et lähme edasi ja installime prop-types teegi.


npm install --save prop-types

Impordime oma dokumendi ülaosas prop-typesraamatukogu. Kaasaegne viis selleks lubaks meil kasutada [import](https://mattwatson.codes/converting-react-createclass-to-react-component/) süntaksit, kuid praegu jäägem sama süntaksi var PropTypes = require('prop-types');juurde, mis on lisatud allolevale dokumendile, kus deklareerime React. Avadeklaratsioon peaks nüüd välja nägema umbes selline:


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

Hea kraam! Sellegipoolest saame 'array' of undefinedveateate. Seda seetõttu, et kasutatav süntaks on React.PropTypes.arrayja me lihtsalt deklareerisime, et PropTypes kasutab muutujat PropTypes. Nii et lihtne lahendus on leida ja asendada kõik React.PropTypeseksemplarid PropTypes.

Meie avanev koodiplokk peaks nüüd välja nägema järgmine:


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

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

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

Nüüd on meie PropTypesi probleem lahendatud! Värskendame oma komponenti ja vaatame, kas see töötab.

Ei, nüüd saame veast aruUncaught TypeError: React.createClass is not a function.

Tabamata tüübiviga: React.createClass ei ole funktsioon.

Jällegi, väike otsing Reacti dokumentatsiooni ja versiooni 15.5.0 väljalaskemärkmete ümber näitab, et React.createClassversioonis 15.5.0 amortiseeriti.

Koos rakendusega React.PropTypesmuudeti React.createClassoma paketiks, kuna React Components’i loomise eelistatud meetod kasutab [React.Component](https://mattwatson.codes/converting-react-createclass-to-react-component/).

React.createClassi asendus on nüüd omaenda npm-hoidlas kui create-react-class. Nii et lähme edasi ja installime selle oma konstruktsiooni.


npm install --save create-react-class

Peame paketi importima oma ehitusse, säilitades jällegi süntaksi klassikalises vormingus, lisades rea var CreateReactClass = require('create-react-class');dokumendi ülaossa, näiteks järgmiselt:


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

Jällegi, meie viga ei kao, sest peame asendama kõik eksemplarid React.createClassmeie uue imporditud objektiga CreateReactClass. See peaks välja nägema natuke selline:


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

Ja see ongi kõik! Komponent enam ei vea ja meie JavaScripti konsool on kena ja puhas.

Valmis lahendus näeb välja umbes selline:

Patched Reacti mitme kontrollnimekirja komponent WordPressis Gutenberg

Õpetuse lähtekood

Komponendi algse ja paigatud versiooni lähtekoodi saate alla laadida GitHubist. Pistikprogramm sisaldab WordPressi Gutenbergi plokki, mida saate koodiga mängimiseks kasutada kolme failiga, mille saate vajaduse korral kustutada:

GitHubi õppefailid paiga React.createClass jaoks

Tõmbetaotluse esitamine algsesse hoidlasse

Tore asi avatud lähtekoodiga kogukonna juures on see, et saame vabalt koodi kaasa aidata ja täiustada. Siin on tõmbetaotlus koos äsja loodud plaastriga, mille esitasin Sony Anile.

: wholesomecode.ltd