Jos rakennat WordPress Gutenberg -lohkoja (tai vaikka et olekaan), saatat yrittää saada kolmannen osapuolen React-komponentin toimimaan rakennuksessasi. Mutta jos se on vanhempi elementti, erityisesti sellainen, joka käyttää vanhentunutta React.createClassmenetelmää, saatat juuttua.
Tämän opetusohjelman mukana tulevat tiedostot ovat alkuperäisissä ja korjatuissa kansioissa GitHub-ratkaisun komponenttikansiossa.
Hanki opetusohjelmatiedostot GitHubista
Etsin valintaruutuluetteloa, jonka avulla pystyin välittämään joukon vaihtoehtoja (samalla tavalla kuin voit siirtää useita vaihtoehtoja <SelectControl/>WordPressin Gutenbergille). Sisäänrakennetulla <CheckboxControl/>ei ollut vaihtoehtoa, mutta netistä etsimisen jälkeen löysin [react-checkbox-list](https://github.com/sonyan/react-checkbox-list) Sony Anin (saatavilla nimellä react-checkbox-listnpm ).
Tämä teki kaiken, mitä halusin sen tekevän, mutta npm:n (npm install react-checkbox-list --save) kautta asennuksen jälkeen se ei toiminut. Tiesin, että minun pitäisi haarukata ja korjata laajennus.
Huomaa, että tämä opetusohjelma kattaa olemassa olevien React.createClassja React.propTypesmenetelmien korjaamisen. Jos olet kiinnostunut oppimaan korjaamaan ne haluamallasi käyttötavalla, [React.Component](https://mattwatson.codes/converting-react-createclass-to-react-component/) katso viestiä kyseisestä aiheesta.
React-komponentin paikkaus
Ensimmäinen kohtaamasi ongelma on, että komponentti ei edes lataudu, ja sinulle esitetään melko ilkeä Uncaught TypeError: Cannot read property 'array' of undefinedvirhe.
Uncaught TypeError, ei voida lukea määrittämättömän ominaisuutta "array".
Tämä johtuu siitä, että komponentti sisältää seuraavan rivin, defaultData: React.PropTypes.array,ja se johtuu siitä React.PropTypes, että se on määrittelemätön.
React.PropTypes on määrittelemätön
Hieman React-dokumentaation tutkiminen osoittaa, että [React.PropTypes](https://reactjs.org/docs/typechecking-with-proptypes.html) Reactin versio 15.5 siirtyi toiseen pakettiin. Se neuvoo meitä käyttämään sen sijaan prop-types -kirjastoa.
Se jopa antaa sinulle linkin prop-type-kirjaston npm-varastoon. Joten mennään eteenpäin ja asennetaan prop-types -kirjasto.
npm install --save prop-types
Tuodaan asiakirjamme yläosassa oleva prop-typeskirjasto. Nykyaikainen tapa saada meidät käyttämään [import](https://mattwatson.codes/converting-react-createclass-to-react-component/) syntaksia, mutta toistaiseksi pysytään samassa syntaksissa, joka lisätään var PropTypes = require('prop-types');alla olevaan dokumenttiin, jossa ilmoitamme React. Aloitusilmoituksen pitäisi nyt näyttää vähän tältä:
'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
},
...
Hieno juttu! Saamme kuitenkin edelleen 'array' of undefinedvirheilmoituksen. No se johtuu siitä, että käytetty syntaksi on React.PropTypes.arrayja julistimme juuri PropTypesimme käyttämään muuttujaa PropTypes. Joten yksinkertainen korjaus on etsiä ja korvata kaikki React.PropTypesesiintymät PropTypes.
Alkukoodilohkomme pitäisi nyt näyttää tältä:
'use strict';
var React = require('react');
var PropTypes = require('prop-types');
module.exports = React.createClass({
displayName: 'CheckBoxList',
propTypes: {
defaultData: PropTypes.array,
onChange: PropTypes.func
},
...
PropTypes-ongelmamme on nyt ratkaistu! Päivitetään komponenttimme ja katsotaan, toimiiko se.
Ei, nyt saamme virheenUncaught TypeError: React.createClass is not a function.
Uncaught TypeError: React.createClass ei ole funktio.
Jälleen pieni haku Reactin dokumentaatiosta ja version 15.5.0 julkaisutiedoista osoittaa meille, että React.createClassversiossa 15.5.0 alennettiin.
Yhdessä React.PropTypes, React.createClassmuunnettiin omaksi paketiksi, koska suosituin menetelmä React Components -komponenttien luomiseen käyttää [React.Component](https://mattwatson.codes/converting-react-createclass-to-react-component/).
Korvaava React.createClass on nyt omassa npm-varastossaan luo-react-luokkana. Joten mennään eteenpäin ja asennataan tämä rakennukseemme.
npm install --save create-react-class
Meidän on tuotava paketti koontiversioomme pitäen taas syntaksi klassisessa muodossa lisäämällä rivi var CreateReactClass = require('create-react-class');asiakirjan yläosaan, kuten:
'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älleen kerran, virheemme ei poistu, koska meidän on korvattava kaikki esiintymät React.createClassuudella tuodulla objektillamme CreateReactClass. Sen pitäisi näyttää vähän tältä:
'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 siinä se! Komponentti ei enää virheitä, ja JavaScript-konsolimme on mukava ja puhdas.
Valmis ratkaisu näyttää vähän tältä:
Patched React -monitarkistuslistakomponentti WordPress Gutenbergissä
Opetusohjelman lähdekoodi
Voit ladata komponentin alkuperäisen ja korjatun version lähdekoodin GitHubista. Laajennus sisältää WordPress Gutenberg -lohkon, jonka avulla voit leikkiä koodilla kolmella tiedostolla, jotka voit poistaa tarpeen mukaan:
React.createClass-korjauksen GitHub-opetustiedostot
Noutopyynnön lähettäminen alkuperäiseen arkistoon
Hienoa avoimen lähdekoodin yhteisössä on, että voimme vapaasti osallistua ja parantaa koodia. Tässä on vetopyyntö ja juuri luomani korjaustiedosto, jonka olen lähettänyt Sony Anille.