{"id":228088,"date":"2022-10-12T11:25:00","date_gmt":"2022-10-12T08:25:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228088"},"modified":"2022-11-09T00:39:13","modified_gmt":"2022-11-08T21:39:13","slug":"uszkodzony-komponent-react-createclass-naprawmy-to","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/uszkodzony-komponent-react-createclass-naprawmy-to\/","title":{"rendered":"Uszkodzony komponent React.createClass? Naprawmy to!"},"content":{"rendered":"\n

Je\u015bli budujesz bloki WordPress Gutenberg (lub nawet je\u015bli nie jeste\u015b), by\u0107 mo\u017ce pr\u00f3bujesz uruchomi\u0107 komponent React innej firmy w swojej kompilacji<\/a>. Ale je\u015bli jest to starszy element, a konkretnie taki, kt\u00f3ry u\u017cywa przestarza\u0142ej React.createClass<\/code>metody, mo\u017cesz utkn\u0105\u0107.<\/p>\n

Pliki towarzysz\u0105ce temu samouczkowi znajduj\u0105 si\u0119 w oryginalnych i poprawionych folderach w folderze components rozwi\u0105zania GitHub.<\/p>\n

Pobierz pliki samouczka z GitHub<\/a><\/p>\n

Szuka\u0142em listy wyboru, kt\u00f3ra pozwoli\u0142a mi przekaza\u0107 szereg opcji (podobnie jak mo\u017cna przekaza\u0107 wiele opcji do <SelectControl\/><\/code>WordPress Gutenberg). Wbudowany <CheckboxControl\/><\/code>nie mia\u0142 opcji, ale po pewnym przeszukiwaniu sieci znalaz\u0142em [react-checkbox-list](https:\/\/github.com\/sonyan\/react-checkbox-list)<\/code> Sony An<\/a> (dost\u0119pny jak react-checkbox-list<\/code>na npm<\/a> ).<\/p>\n

To zrobi\u0142o wszystko, co chcia\u0142em, ale po zainstalowaniu go przez npm (npm install react-checkbox-list --save<\/code>) nie dzia\u0142a\u0142o. Wiedzia\u0142em, \u017ce b\u0119d\u0119 musia\u0142 rozwidle\u0107 i za\u0142ata\u0107 wtyczk\u0119.<\/p>\n

Zauwa\u017c, \u017ce ten samouczek obejmuje \u0142atanie istniej\u0105cych React.createClass<\/code>i React.propTypes<\/code>metod. Je\u015bli chcesz dowiedzie\u0107 si\u0119, jak je za\u0142ata\u0107 za pomoc\u0105 preferowanej metody u\u017cycia<\/a> [React.Component](https:\/\/mattwatson.codes\/converting-react-createclass-to-react-component\/)<\/code> , zapoznaj si\u0119 z postem na ten temat<\/a>.<\/p>\n

\u0141atanie komponentu React<\/h2>\n

Pierwszym problemem, na kt\u00f3ry natkniesz si\u0119, jest to, \u017ce komponent si\u0119 nawet nie za\u0142aduje, i pojawi si\u0119 raczej paskudny Uncaught TypeError: Cannot read property 'array' of undefined<\/code>b\u0142\u0105d.<\/p>\n

Nieprzechwycony b\u0142\u0105d typu, nie mo\u017cna odczyta\u0107 w\u0142a\u015bciwo\u015bci \u201etablicy" niezdefiniowanej<\/p>\n

Dzieje si\u0119 tak, poniewa\u017c Komponent zawiera nast\u0119puj\u0105cy wiersz defaultData: React.PropTypes.array,<\/code>i to dlatego React.PropTypes<\/code>, \u017ce jest niezdefiniowany.<\/p>\n

\"UszkodzonyReact.PropTypes jest niezdefiniowany<\/p>\n

Troch\u0119 zbadania dokumentacji Reacta pokazuje, \u017ce<\/a> [React.PropTypes](https:\/\/reactjs.org\/docs\/typechecking-with-proptypes.html)<\/code> przeniesiono j\u0105 do innego pakietu w wersji 15.5 Reacta<\/a>. Radzi nam zamiast tego u\u017cy\u0107 biblioteki prop-types.<\/p>\n

Daje nawet link do repozytorium npm dla biblioteki prop-types<\/a>. Wi\u0119c \u015bmia\u0142o zainstalujmy bibliotek\u0119 prop-types.<\/p>\n

npm install --save prop-types\n<\/code><\/pre>\n
U g\u00f3ry naszego dokumentu zaimportujmy prop-types<\/code>bibliotek\u0119. Nowoczesny spos\u00f3b wymaga\u0142by u\u017cycia<\/a> [import](https:\/\/mattwatson.codes\/converting-react-createclass-to-react-component\/)<\/code> sk\u0142adni<\/a>, ale na razie trzymajmy si\u0119 tej samej sk\u0142adni dodaj var PropTypes = require('prop-types');<\/code>do poni\u017cszego dokumentu, w kt\u00f3rym deklarujemy React<\/code>. Deklaracja otwarcia powinna teraz wygl\u0105da\u0107 mniej wi\u0119cej tak:<\/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
\u015awietne rzeczy! Jednak nadal otrzymujemy komunikat o 'array' of undefined<\/code>b\u0142\u0119dzie. To dlatego, \u017ce u\u017cywana sk\u0142adnia jest taka React.PropTypes.array<\/code>, a my w\u0142a\u015bnie zadeklarowali\u015bmy nasze PropTypes do u\u017cywania zmiennej PropTypes<\/code>. Tak wi\u0119c prost\u0105 poprawk\u0105 jest znalezienie i zast\u0105pienie wszystkich wyst\u0105pie\u0144 React.PropTypes<\/code>z PropTypes<\/code>.<\/p>\n
Nasz otwieraj\u0105cy blok kodu powinien teraz wygl\u0105da\u0107 tak:<\/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
No to zaczynamy, nasz problem z PropTypes zosta\u0142 rozwi\u0105zany! Od\u015bwie\u017cmy nasz komponent i zobaczmy, czy dzia\u0142a.<\/p>\n
Nie, teraz pojawia si\u0119 b\u0142\u0105dUncaught TypeError: React.createClass is not a function.<\/code><\/p>\n
\"Uszkodzony\"UszkodzonyUncaught TypeError: React.createClass nie jest funkcj\u0105.\ufeff<\/p>\n
Ponownie, kr\u00f3tkie przeszukanie dokumentacji Reacta i informacji o wydaniu wersji 15.5.0<\/a> pokazuje, \u017ce React.createClass<\/code>zosta\u0142a ona przestarza\u0142a w wersji 15.5.0.<\/p>\n
Wraz z React.PropTypes<\/code>, React.createClass<\/code>zosta\u0142 zrefaktoryzowany do w\u0142asnego pakietu, jako preferowana metoda tworzenia React Components wykorzystuje<\/a> [React.Component](https:\/\/mattwatson.codes\/converting-react-createclass-to-react-component\/)<\/code>.<\/p>\n
Zamiennik dla React.createClass znajduje si\u0119 teraz we w\u0142asnym repozytorium npm jako create-react-class<\/a>. Wi\u0119c \u015bmia\u0142o zainstalujmy to w naszej kompilacji.<\/p>\n
npm install --save create-react-class\n<\/code><\/pre>\n
Musimy zaimportowa\u0107 pakiet do naszej kompilacji, ponownie zachowuj\u0105c sk\u0142adni\u0119 w klasycznym formacie, dodaj\u0105c lini\u0119 var CreateReactClass = require('create-react-class');<\/code>na g\u00f3rze dokumentu, na przyk\u0142ad:<\/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
Ponownie, nasz b\u0142\u0105d nie zniknie, poniewa\u017c musimy zast\u0105pi\u0107 wszystkie instancje React.createClass<\/code>naszym nowym zaimportowanym obiektem CreateReactClass<\/code>. To powinno wygl\u0105da\u0107 troch\u0119 tak:<\/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
I to wszystko! Komponent nie ma ju\u017c b\u0142\u0119d\u00f3w, a nasza konsola JavaScript jest \u0142adna i czysta.<\/p>\n
Gotowe rozwi\u0105zanie wygl\u0105da troch\u0119 tak:<\/p>\n
\"UszkodzonyPoprawiony sk\u0142adnik listy kontrolnej wielokrotnego reagowania w WordPress Gutenberg<\/p>\n
Kod \u017ar\u00f3d\u0142owy samouczka<\/h2>\n
Mo\u017cesz pobra\u0107 kod \u017ar\u00f3d\u0142owy oryginalnej i poprawionej wersji komponentu z serwisu GitHub<\/a>. Wtyczka zawiera blok WordPress Gutenberg, kt\u00f3rego mo\u017cesz u\u017cy\u0107 do zabawy z kodem, z trzema plikami, kt\u00f3re mo\u017cesz usun\u0105\u0107, je\u015bli dotyczy:<\/p>\n
\"UszkodzonyPliki samouczka GitHub dla poprawki React.createClass<\/p>\n
Przesy\u0142anie pull request do oryginalnego repozytorium<\/h2>\n
Wspania\u0142\u0105 rzecz\u0105 w spo\u0142eczno\u015bci open source jest to, \u017ce mo\u017cemy wnosi\u0107 sw\u00f3j wk\u0142ad i ulepsza\u0107 kod. Oto pull request z poprawk\u0105, kt\u00f3r\u0105 w\u0142a\u015bnie stworzy\u0142em<\/a>, i kt\u00f3ry przes\u0142a\u0142em do Sony An.<\/p>\n
\u0179r\u00f3d\u0142o nagrywania:  wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Je\u015bli budujesz bloki WordPress Gutenberg (lub nawet je\u015bli nie jeste\u015b), by\u0107 mo\u017ce pr\u00f3bujesz uruchomi\u0107 komponent React innej firmy w swojej kompilacji. Ale je\u015bli to starszy 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":[721,919,897,845],"tags":[1169],"class_list":["post-228088","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-deweloper","category-inny","category-kod","category-samouczki","tag-affiai-pl"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/228088","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/comments?post=228088"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/228088\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media\/224207"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media?parent=228088"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/categories?post=228088"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/tags?post=228088"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}