{"id":228031,"date":"2022-10-12T11:38:00","date_gmt":"2022-10-12T08:38:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228031"},"modified":"2022-11-09T00:20:29","modified_gmt":"2022-11-08T21:20:29","slug":"trasig-react-createclass-komponent-laat-oss-fixa-det","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/trasig-react-createclass-komponent-laat-oss-fixa-det\/","title":{"rendered":"Trasig React.createClass-komponent? L\u00e5t oss fixa det!"},"content":{"rendered":"\n

Om du bygger WordPress Gutenberg-block (eller \u00e4ven om du inte g\u00f6r det) kanske du f\u00f6rs\u00f6ker f\u00e5 en tredje parts React Component att fungera i din build<\/a>. Men om det \u00e4r ett \u00e4ldre element, specifikt ett som anv\u00e4nder den f\u00f6r\u00e5ldrade React.createClass<\/code>metoden, kan du fastna.<\/p>\n

Filerna som f\u00f6ljer med den h\u00e4r handledningen finns i originalmapparna och de korrigerade mapparna i komponentmappen i GitHub-l\u00f6sningen.<\/p>\n

F\u00e5 handledningsfiler fr\u00e5n GitHub<\/a><\/p>\n

Jag letade efter en kryssrutelista som till\u00e4t mig att skicka en rad alternativ (liknande hur du kan skicka flera alternativ till <SelectControl\/><\/code>i WordPress Gutenberg). Den inbyggda <CheckboxControl\/><\/code>hade inget alternativ, men efter lite s\u00f6kning p\u00e5 webben hittade jag [react-checkbox-list](https:\/\/github.com\/sonyan\/react-checkbox-list)<\/code> av Sony An<\/a> (tillg\u00e4nglig som react-checkbox-list<\/code>p\u00e5 npm<\/a> ).<\/p>\n

Detta gjorde allt jag ville att det skulle g\u00f6ra, men efter att ha installerat det via npm (npm install react-checkbox-list --save<\/code>) fungerade det inte. Jag visste att jag skulle beh\u00f6va punga och lappa insticksprogrammet.<\/p>\n

Observera att den h\u00e4r handledningen t\u00e4cker korrigering av befintliga React.createClass<\/code>och React.propTypes<\/code>metoder. Om du \u00e4r intresserad av att l\u00e4ra dig hur du lappar dem med den f\u00f6redragna metoden att anv\u00e4nda<\/a> [React.Component](https:\/\/mattwatson.codes\/converting-react-createclass-to-react-component\/)<\/code> , se inl\u00e4gget om det \u00e4mnet<\/a>.<\/p>\n

Patcha React-komponenten<\/h2>\n

Det f\u00f6rsta problemet du kommer att st\u00f6ta p\u00e5 \u00e4r att komponenten inte ens kommer att laddas, och du kommer att presenteras med ett ganska ot\u00e4ckt Uncaught TypeError: Cannot read property 'array' of undefined<\/code>fel.<\/p>\n

Uncaught TypeError, kan inte l\u00e4sa egenskapen ’array’ f\u00f6r undefined<\/p>\n

Detta beror p\u00e5 att komponenten inneh\u00e5ller f\u00f6ljande rad defaultData: React.PropTypes.array,<\/code>och det \u00e4r f\u00f6r React.PropTypes<\/code>att den \u00e4r odefinierad.<\/p>\n

\"TrasigReact.PropTypes \u00e4r odefinierat<\/p>\n

Lite granskning av React-dokumentationen visar att den<\/a> [React.PropTypes](https:\/\/reactjs.org\/docs\/typechecking-with-proptypes.html)<\/code> flyttade till ett annat paket i React version 15.5<\/a>. Det r\u00e5der oss att anv\u00e4nda biblioteket med prop-typer ist\u00e4llet.<\/p>\n

Det ger dig till och med en l\u00e4nk till npm-f\u00f6rvaret f\u00f6r biblioteket f\u00f6r prop-typer<\/a>. S\u00e5 l\u00e5t oss g\u00e5 vidare och installera prop-types-biblioteket.<\/p>\n

npm install --save prop-types\n<\/code><\/pre>\n
\u00d6verst i v\u00e5rt dokument, l\u00e5t oss importera prop-types<\/code>biblioteket. Det moderna s\u00e4ttet f\u00f6r detta skulle f\u00e5 oss att anv\u00e4nda<\/a> [import](https:\/\/mattwatson.codes\/converting-react-createclass-to-react-component\/)<\/code> syntaxen<\/a>, men l\u00e5t oss f\u00f6r n\u00e4rvarande forts\u00e4tta att l\u00e4gga var PropTypes = require('prop-types');<\/code>till samma syntax i dokumentet nedan d\u00e4r vi deklarerar React<\/code>. Inledningsdeklarationen b\u00f6r nu se ut ungef\u00e4r s\u00e5 h\u00e4r:<\/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
Bra saker! Men vi f\u00e5r fortfarande 'array' of undefined<\/code>felmeddelandet. Jo det beror p\u00e5 att syntaxen som anv\u00e4nds \u00e4r React.PropTypes.array<\/code>och vi har precis deklarerat att v\u00e5ra PropTypes anv\u00e4nder variabeln PropTypes<\/code>. S\u00e5 den enkla fixen \u00e4r att hitta och ers\u00e4tta alla instanser av React.PropTypes<\/code>med PropTypes<\/code>.<\/p>\n
V\u00e5rt \u00f6ppningsblock med kod b\u00f6r nu se ut s\u00e5 h\u00e4r:<\/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
D\u00e4r g\u00e5r vi, v\u00e5rt PropTypes-problem \u00e4r nu l\u00f6st! L\u00e5t oss uppdatera v\u00e5r komponent och se om den fungerar.<\/p>\n
Nej, nu f\u00e5r vi feletUncaught TypeError: React.createClass is not a function.<\/code><\/p>\n
\"Trasig\"TrasigUncaught TypeError: React.createClass \u00e4r inte en funktion.\ufeff<\/p>\n
\u00c5terigen, en liten s\u00f6kning runt React-dokumentationen och release notes f\u00f6r v15.5.0<\/a> visar oss att React.createClass<\/code>det avskrivs i version 15.5.0.<\/p>\n
Tillsammans med React.PropTypes<\/code>, React.createClass<\/code>omstrukturerades till ett eget paket, eftersom den f\u00f6redragna metoden f\u00f6r att skapa React Components anv\u00e4nder<\/a> [React.Component](https:\/\/mattwatson.codes\/converting-react-createclass-to-react-component\/)<\/code>.<\/p>\n
Ers\u00e4ttningen f\u00f6r React.createClass finns nu i sitt eget npm-f\u00f6rr\u00e5d som create-react-class<\/a>. S\u00e5 l\u00e5t oss g\u00e5 vidare och installera detta i v\u00e5r build.<\/p>\n
npm install --save create-react-class\n<\/code><\/pre>\n
Vi m\u00e5ste importera paketet till v\u00e5r build, \u00e5terigen beh\u00e5lla syntaxen i det klassiska formatet och l\u00e4gg till raden var CreateReactClass = require('create-react-class');<\/code>h\u00f6gst upp i dokumentet, s\u00e5 h\u00e4r:<\/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
\u00c5terigen, v\u00e5rt fel kommer inte att f\u00f6rsvinna, eftersom vi m\u00e5ste ers\u00e4tta alla instanser av React.createClass<\/code>med v\u00e5rt nya importerade objekt CreateReactClass<\/code>. Det borde se ut lite s\u00e5 h\u00e4r:<\/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
Och det \u00e4r allt! Komponenten har inte l\u00e4ngre fel, och v\u00e5r JavaScript-konsol \u00e4r snygg och ren.<\/p>\n
Den f\u00e4rdiga l\u00f6sningen ser ut ungef\u00e4r s\u00e5 h\u00e4r:<\/p>\n
\"TrasigKomponenten f\u00f6r patchad React Multiple Checklist i WordPress Gutenberg<\/p>\n
Handlednings k\u00e4llkod<\/h2>\n
Du kan ladda ner k\u00e4llkoden f\u00f6r den ursprungliga och korrigerade versionen av komponenten p\u00e5 GitHub<\/a>. Pluginet inneh\u00e5ller ett WordPress Gutenberg-block som du kan anv\u00e4nda f\u00f6r att leka med koden, med tre filer som du kan ta bort i f\u00f6rekommande fall:<\/p>\n
\"TrasigGitHub Tutorial-filer f\u00f6r React.createClass-patchen<\/p>\n
Skicka en Pull-f\u00f6rfr\u00e5gan till originalf\u00f6rr\u00e5det<\/h2>\n
Det fina med \u00f6ppen k\u00e4llkodsgemenskapen \u00e4r att vi \u00e4r fria att bidra och f\u00f6rb\u00e4ttra kod. H\u00e4r \u00e4r Pull Request med patchen som jag just har skapat<\/a> som jag har skickat till Sony An.<\/p>\n
Inspelningsk\u00e4lla:  wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Om du bygger WordPress Gutenberg-block (eller \u00e4ven om du inte g\u00f6r det) kanske du f\u00f6rs\u00f6ker f\u00e5 en tredjeparts React Component att fungera i din konstruktion. Men om det \u00e4r ett \u00e4ldre 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":[848,901,922,724],"tags":[1173],"class_list":["post-228031","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-handledningar","category-koda","category-oevrig","category-utvecklaren","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/228031","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/comments?post=228031"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/228031\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/224207"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=228031"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=228031"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=228031"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}