{"id":228196,"date":"2022-10-12T10:59:00","date_gmt":"2022-10-12T07:59:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228196"},"modified":"2022-11-09T01:14:21","modified_gmt":"2022-11-08T22:14:21","slug":"kas-react-createclassi-komponent-on-katki-teeme-selle-korda","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/et\/kas-react-createclassi-komponent-on-katki-teeme-selle-korda\/","title":{"rendered":"Kas React.createClassi komponent on katki? Teeme selle korda!"},"content":{"rendered":"\n

Kui loote WordPressi Gutenbergi plokke (v\u00f5i isegi kui te seda ei tee), v\u00f5ite proovida panna oma konstruktsioonis t\u00f6\u00f6le kolmanda osapoole reaktsioonikomponent<\/a>. Kuid kui see on vanem element, t\u00e4psemalt selline, mis kasutab aegunud React.createClass<\/code>meetodit, v\u00f5ite takerduda.<\/p>\n

Selle \u00f5petusega kaasas olevad failid on GitHubi lahenduse komponentide kaustas originaal- ja paigatud kaustades.<\/p>\n

Hankige \u00f5petusfailid GitHubist<\/a><\/p>\n

Otsisin m\u00e4rkeruutude loendit, mis v\u00f5imaldas mul edastada mitmesuguseid valikuid (sarnaselt sellele, kuidas saate edastada mitu valikut <SelectControl\/><\/code>WordPressi Gutenbergi valikule). Sisseehitatud <CheckboxControl\/><\/code>seadmel ei olnud valikut, kuid p\u00e4rast m\u00f5ningast veebist otsimist leidsin [react-checkbox-list](https:\/\/github.com\/sonyan\/react-checkbox-list)<\/code> Sony An<\/a> (saadaval react-checkbox-list<\/code>aadressil npm<\/a> ).<\/p>\n

See tegi k\u00f5ik, mida ma tahtsin, kuid p\u00e4rast npm (npm install react-checkbox-list --save<\/code>) kaudu installimist see ei t\u00f6\u00f6tanud. Teadsin, et pean pistikprogrammi paika panema.<\/p>\n

Pange t\u00e4hele, et see \u00f5petus h\u00f5lmab olemasolevate React.createClass<\/code>ja React.propTypes<\/code>meetodite lappimist. Kui soovite \u00f5ppida, kuidas neid eelistatud kasutusmeetodiga parandada,<\/a> [React.Component](https:\/\/mattwatson.codes\/converting-react-createclass-to-react-component\/)<\/code> vaadake selle teema postitust<\/a>.<\/p>\n

Reaktsioonikomponendi lappimine<\/h2>\n

Esimene probleem, millega kokku puutute, on see, et komponenti isegi ei laadita ja teile kuvatakse \u00fcsna vastik Uncaught TypeError: Cannot read property 'array' of undefined<\/code>viga.<\/p>\n

Tabamata t\u00fc\u00fcbiviga, m\u00e4\u00e4ratlemata atribuuti massiivi ei saa lugeda<\/p>\n

Selle p\u00f5hjuseks on asjaolu, et komponent sisaldab j\u00e4rgmist rida defaultData: React.PropTypes.array,<\/code>ja see React.PropTypes<\/code>on m\u00e4\u00e4ratlemata.<\/p>\n

\"KasReact.PropTypes on m\u00e4\u00e4ramata<\/p>\n

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

See annab teile isegi lingi prop-types teegi npm hoidlasse<\/a>. Nii et l\u00e4hme edasi ja installime prop-types teegi.<\/p>\n

npm install --save prop-types\n<\/code><\/pre>\n
Impordime oma dokumendi \u00fclaosas prop-types<\/code>raamatukogu. Kaasaegne viis selleks lubaks meil kasutada<\/a> [import](https:\/\/mattwatson.codes\/converting-react-createclass-to-react-component\/)<\/code> s\u00fcntaksit<\/a>, kuid praegu j\u00e4\u00e4gem sama s\u00fcntaksi var PropTypes = require('prop-types');<\/code>juurde, mis on lisatud allolevale dokumendile, kus deklareerime React<\/code>. Avadeklaratsioon peaks n\u00fc\u00fcd v\u00e4lja n\u00e4gema umbes selline:<\/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
Hea kraam! Sellegipoolest saame 'array' of undefined<\/code>veateate. Seda seet\u00f5ttu, et kasutatav s\u00fcntaks on React.PropTypes.array<\/code>ja me lihtsalt deklareerisime, et PropTypes kasutab muutujat PropTypes<\/code>. Nii et lihtne lahendus on leida ja asendada k\u00f5ik React.PropTypes<\/code>eksemplarid PropTypes<\/code>.<\/p>\n
Meie avanev koodiplokk peaks n\u00fc\u00fcd v\u00e4lja n\u00e4gema j\u00e4rgmine:<\/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
N\u00fc\u00fcd on meie PropTypesi probleem lahendatud! V\u00e4rskendame oma komponenti ja vaatame, kas see t\u00f6\u00f6tab.<\/p>\n
Ei, n\u00fc\u00fcd saame veast aruUncaught TypeError: React.createClass is not a function.<\/code><\/p>\n
\"Kas\"KasTabamata t\u00fc\u00fcbiviga: React.createClass ei ole funktsioon.\ufeff<\/p>\n
J\u00e4llegi, v\u00e4ike otsing Reacti dokumentatsiooni ja versiooni 15.5.0 v\u00e4ljalaskem\u00e4rkmete \u00fcmber<\/a> n\u00e4itab, et React.createClass<\/code>versioonis 15.5.0 amortiseeriti.<\/p>\n
Koos rakendusega React.PropTypes<\/code>muudeti React.createClass<\/code>oma paketiks, kuna React Components’i loomise eelistatud meetod kasutab<\/a> [React.Component](https:\/\/mattwatson.codes\/converting-react-createclass-to-react-component\/)<\/code>.<\/p>\n
React.createClassi asendus on n\u00fc\u00fcd omaenda npm-hoidlas kui create-react-class<\/a>. Nii et l\u00e4hme edasi ja installime selle oma konstruktsiooni.<\/p>\n
npm install --save create-react-class\n<\/code><\/pre>\n
Peame paketi importima oma ehitusse, s\u00e4ilitades j\u00e4llegi s\u00fcntaksi klassikalises vormingus, lisades rea var CreateReactClass = require('create-react-class');<\/code>dokumendi \u00fclaossa, n\u00e4iteks j\u00e4rgmiselt:<\/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\u00e4llegi, meie viga ei kao, sest peame asendama k\u00f5ik eksemplarid React.createClass<\/code>meie uue imporditud objektiga CreateReactClass<\/code>. See peaks v\u00e4lja n\u00e4gema natuke selline:<\/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 see ongi k\u00f5ik! Komponent enam ei vea ja meie JavaScripti konsool on kena ja puhas.<\/p>\n
Valmis lahendus n\u00e4eb v\u00e4lja umbes selline:<\/p>\n
\"KasPatched Reacti mitme kontrollnimekirja komponent WordPressis Gutenberg<\/p>\n
\u00d5petuse l\u00e4htekood<\/h2>\n
Komponendi algse ja paigatud versiooni l\u00e4htekoodi<\/a> saate alla laadida GitHubist. Pistikprogramm sisaldab WordPressi Gutenbergi plokki, mida saate koodiga m\u00e4ngimiseks kasutada kolme failiga, mille saate vajaduse korral kustutada:<\/p>\n
\"KasGitHubi \u00f5ppefailid paiga React.createClass jaoks<\/p>\n
T\u00f5mbetaotluse esitamine algsesse hoidlasse<\/h2>\n
Tore asi avatud l\u00e4htekoodiga kogukonna juures on see, et saame vabalt koodi kaasa aidata ja t\u00e4iustada. Siin on t\u00f5mbetaotlus koos \u00e4sja loodud plaastriga, mille esitasin<\/a> Sony Anile.<\/p>\n
:  wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Kui loote WordPressi Gutenbergi plokke (v\u00f5i isegi kui te seda ei tee), v\u00f5ite proovida panna oma konstruktsioonis t\u00f6\u00f6le kolmanda osapoole reaktsioonikomponent. Aga kui see on vanem element, …<\/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":[718,894,916,842],"tags":[1165],"class_list":["post-228196","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-arendaja","category-kood","category-muud","category-opetused","tag-affiai-et"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/228196","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/comments?post=228196"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/228196\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media\/224207"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media?parent=228196"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/categories?post=228196"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/tags?post=228196"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}