{"id":228653,"date":"2022-10-12T11:13:00","date_gmt":"2022-10-12T08:13:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228653"},"modified":"2022-11-09T03:35:05","modified_gmt":"2022-11-09T00:35:05","slug":"onko-react-createclass-komponentti-rikki-korjataan-se","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/onko-react-createclass-komponentti-rikki-korjataan-se\/","title":{"rendered":"Onko React.createClass-komponentti rikki? Korjataan se!"},"content":{"rendered":"\n

Jos rakennat WordPress Gutenberg -lohkoja (tai vaikka et olekaan), saatat yritt\u00e4\u00e4 saada kolmannen osapuolen React-komponentin toimimaan rakennuksessasi<\/a>. Mutta jos se on vanhempi elementti, erityisesti sellainen, joka k\u00e4ytt\u00e4\u00e4 vanhentunutta React.createClass<\/code>menetelm\u00e4\u00e4, saatat juuttua.<\/p>\n

T\u00e4m\u00e4n opetusohjelman mukana tulevat tiedostot ovat alkuper\u00e4isiss\u00e4 ja korjatuissa kansioissa GitHub-ratkaisun komponenttikansiossa.<\/p>\n

Hanki opetusohjelmatiedostot GitHubista<\/a><\/p>\n

Etsin valintaruutuluetteloa, jonka avulla pystyin v\u00e4litt\u00e4m\u00e4\u00e4n joukon vaihtoehtoja (samalla tavalla kuin voit siirt\u00e4\u00e4 useita vaihtoehtoja <SelectControl\/><\/code>WordPressin Gutenbergille). Sis\u00e4\u00e4nrakennetulla <CheckboxControl\/><\/code>ei ollut vaihtoehtoa, mutta netist\u00e4 etsimisen j\u00e4lkeen l\u00f6ysin [react-checkbox-list](https:\/\/github.com\/sonyan\/react-checkbox-list)<\/code> Sony Anin<\/a> (saatavilla nimell\u00e4 react-checkbox-list<\/code>npm<\/a> ).<\/p>\n

T\u00e4m\u00e4 teki kaiken, mit\u00e4 halusin sen tekev\u00e4n, mutta npm:n (npm install react-checkbox-list --save<\/code>) kautta asennuksen j\u00e4lkeen se ei toiminut. Tiesin, ett\u00e4 minun pit\u00e4isi haarukata ja korjata laajennus.<\/p>\n

Huomaa, ett\u00e4 t\u00e4m\u00e4 opetusohjelma kattaa olemassa olevien React.createClass<\/code>ja React.propTypes<\/code>menetelmien korjaamisen. Jos olet kiinnostunut oppimaan korjaamaan ne haluamallasi k\u00e4ytt\u00f6tavalla,<\/a> [React.Component](https:\/\/mattwatson.codes\/converting-react-createclass-to-react-component\/)<\/code> katso viesti\u00e4 kyseisest\u00e4 aiheesta<\/a>.<\/p>\n

React-komponentin paikkaus<\/h2>\n

Ensimm\u00e4inen kohtaamasi ongelma on, ett\u00e4 komponentti ei edes lataudu, ja sinulle esitet\u00e4\u00e4n melko ilke\u00e4 Uncaught TypeError: Cannot read property 'array' of undefined<\/code>virhe.<\/p>\n

Uncaught TypeError, ei voida lukea m\u00e4\u00e4ritt\u00e4m\u00e4tt\u00f6m\u00e4n ominaisuutta "array".<\/p>\n

T\u00e4m\u00e4 johtuu siit\u00e4, ett\u00e4 komponentti sis\u00e4lt\u00e4\u00e4 seuraavan rivin, defaultData: React.PropTypes.array,<\/code>ja se johtuu siit\u00e4 React.PropTypes<\/code>, ett\u00e4 se on m\u00e4\u00e4rittelem\u00e4t\u00f6n.<\/p>\n

\"OnkoReact.PropTypes on m\u00e4\u00e4rittelem\u00e4t\u00f6n<\/p>\n

Hieman React-dokumentaation tutkiminen osoittaa, ett\u00e4<\/a> [React.PropTypes](https:\/\/reactjs.org\/docs\/typechecking-with-proptypes.html)<\/code> Reactin versio 15.5 siirtyi toiseen pakettiin<\/a>. Se neuvoo meit\u00e4 k\u00e4ytt\u00e4m\u00e4\u00e4n sen sijaan prop-types -kirjastoa.<\/p>\n

Se jopa antaa sinulle linkin prop-type-kirjaston npm-varastoon<\/a>. Joten menn\u00e4\u00e4n eteenp\u00e4in ja asennetaan prop-types -kirjasto.<\/p>\n

npm install --save prop-types\n<\/code><\/pre>\n
Tuodaan asiakirjamme yl\u00e4osassa oleva prop-types<\/code>kirjasto. Nykyaikainen tapa saada meid\u00e4t k\u00e4ytt\u00e4m\u00e4\u00e4n<\/a> [import](https:\/\/mattwatson.codes\/converting-react-createclass-to-react-component\/)<\/code> syntaksia<\/a>, mutta toistaiseksi pysyt\u00e4\u00e4n samassa syntaksissa, joka lis\u00e4t\u00e4\u00e4n var PropTypes = require('prop-types');<\/code>alla olevaan dokumenttiin, jossa ilmoitamme React<\/code>. Aloitusilmoituksen pit\u00e4isi nyt n\u00e4ytt\u00e4\u00e4 v\u00e4h\u00e4n t\u00e4lt\u00e4:<\/p>\n
'use strict';\nvar React     = require('react');\nvar PropTypes = require('prop-types');\n\nmodule.exports = React.createClass({\n    displayName: 'CheckBoxList',\n\n    propTypes: {\n        defaultData: React.PropTypes.array,\n        onChange: React.PropTypes.func\n    },\n...\n<\/code><\/pre>\n
Hieno juttu! Saamme kuitenkin edelleen 'array' of undefined<\/code>virheilmoituksen. No se johtuu siit\u00e4, ett\u00e4 k\u00e4ytetty syntaksi on React.PropTypes.array<\/code>ja julistimme juuri PropTypesimme k\u00e4ytt\u00e4m\u00e4\u00e4n muuttujaa PropTypes<\/code>. Joten yksinkertainen korjaus on etsi\u00e4 ja korvata kaikki React.PropTypes<\/code>esiintym\u00e4t PropTypes<\/code>.<\/p>\n
Alkukoodilohkomme pit\u00e4isi nyt n\u00e4ytt\u00e4\u00e4 t\u00e4lt\u00e4:<\/p>\n
'use strict';\nvar React     = require('react');\nvar PropTypes = require('prop-types');\n\nmodule.exports = React.createClass({\n    displayName: 'CheckBoxList',\n\n    propTypes: {\n        defaultData: PropTypes.array,\n        onChange: PropTypes.func\n    },\n...\n<\/code><\/pre>\n
PropTypes-ongelmamme on nyt ratkaistu! P\u00e4ivitet\u00e4\u00e4n komponenttimme ja katsotaan, toimiiko se.<\/p>\n
Ei, nyt saamme virheenUncaught TypeError: React.createClass is not a function.<\/code><\/p>\n
\"Onko\"OnkoUncaught TypeError: React.createClass ei ole funktio.\ufeff<\/p>\n
J\u00e4lleen pieni haku Reactin dokumentaatiosta ja version 15.5.0 julkaisutiedoista<\/a> osoittaa meille, ett\u00e4 React.createClass<\/code>versiossa 15.5.0 alennettiin.<\/p>\n
Yhdess\u00e4 React.PropTypes<\/code>, React.createClass<\/code>muunnettiin omaksi paketiksi, koska suosituin menetelm\u00e4 React Components -komponenttien luomiseen k\u00e4ytt\u00e4\u00e4<\/a> [React.Component](https:\/\/mattwatson.codes\/converting-react-createclass-to-react-component\/)<\/code>.<\/p>\n
Korvaava React.createClass on nyt omassa npm-varastossaan luo-react-luokkana<\/a>. Joten menn\u00e4\u00e4n eteenp\u00e4in ja asennataan t\u00e4m\u00e4 rakennukseemme.<\/p>\n
npm install --save create-react-class\n<\/code><\/pre>\n
Meid\u00e4n on tuotava paketti koontiversioomme pit\u00e4en taas syntaksi klassisessa muodossa lis\u00e4\u00e4m\u00e4ll\u00e4 rivi var CreateReactClass = require('create-react-class');<\/code>asiakirjan yl\u00e4osaan, kuten:<\/p>\n
'use strict';\nvar React            = require('react');\nvar PropTypes        = require('prop-types');\nvar CreateReactClass = require('create-react-class');\n\nmodule.exports = React.createClass({\n    displayName: 'CheckBoxList',\n\n    propTypes: {\n        defaultData: PropTypes.array,\n        onChange: PropTypes.func\n    },\n...\n<\/code><\/pre>\n
J\u00e4lleen kerran, virheemme ei poistu, koska meid\u00e4n on korvattava kaikki esiintym\u00e4t React.createClass<\/code>uudella tuodulla objektillamme CreateReactClass<\/code>. Sen pit\u00e4isi n\u00e4ytt\u00e4\u00e4 v\u00e4h\u00e4n t\u00e4lt\u00e4:<\/p>\n
'use strict';\nvar React            = require('react');\nvar PropTypes        = require('prop-types');\nvar CreateReactClass = require('create-react-class');\n\nmodule.exports = CreateReactClass({\n    displayName: 'CheckBoxList',\n\n    propTypes: {\n        defaultData: PropTypes.array,\n        onChange: PropTypes.func\n    },\n...\n<\/code><\/pre>\n
Ja siin\u00e4 se! Komponentti ei en\u00e4\u00e4 virheit\u00e4, ja JavaScript-konsolimme on mukava ja puhdas.<\/p>\n
Valmis ratkaisu n\u00e4ytt\u00e4\u00e4 v\u00e4h\u00e4n t\u00e4lt\u00e4:<\/p>\n
\"OnkoPatched React -monitarkistuslistakomponentti WordPress Gutenbergiss\u00e4<\/p>\n
Opetusohjelman l\u00e4hdekoodi<\/h2>\n
Voit ladata komponentin alkuper\u00e4isen ja korjatun version l\u00e4hdekoodin GitHubista<\/a>. Laajennus sis\u00e4lt\u00e4\u00e4 WordPress Gutenberg -lohkon, jonka avulla voit leikki\u00e4 koodilla kolmella tiedostolla, jotka voit poistaa tarpeen mukaan:<\/p>\n
\"OnkoReact.createClass-korjauksen GitHub-opetustiedostot<\/p>\n
Noutopyynn\u00f6n l\u00e4hett\u00e4minen alkuper\u00e4iseen arkistoon<\/h2>\n
Hienoa avoimen l\u00e4hdekoodin yhteis\u00f6ss\u00e4 on, ett\u00e4 voimme vapaasti osallistua ja parantaa koodia. T\u00e4ss\u00e4 on vetopyynt\u00f6 ja juuri luomani korjaustiedosto,<\/a> jonka olen l\u00e4hett\u00e4nyt Sony Anille.<\/p>\n
:  wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Jos rakennat WordPress Gutenberg Blocks -lohkoja (tai vaikka et olekaan), saatat yritt\u00e4\u00e4 saada kolmannen osapuolen React-komponentin toimimaan rakennuksessasi. Mutta jos se on vanhempi elementti, …<\/p>\n","protected":false},"author":1,"featured_media":224207,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[719,895,917,843],"tags":[1166],"class_list":["post-228653","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-kehittaejae","category-koodi","category-muut","category-opetusohjelmia","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/228653","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/comments?post=228653"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/228653\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/224207"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=228653"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=228653"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=228653"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}