Jeśli budujesz bloki WordPress Gutenberg (lub nawet jeśli nie jesteś), być może próbujesz uruchomić komponent React innej firmy w swojej kompilacji. Ale jeśli jest to starszy element, a konkretnie taki, który używa przestarzałej React.createClassmetody, możesz utknąć.
Pliki towarzyszące temu samouczkowi znajdują się w oryginalnych i poprawionych folderach w folderze components rozwiązania GitHub.
Pobierz pliki samouczka z GitHub
Szukałem listy wyboru, która pozwoliła mi przekazać szereg opcji (podobnie jak można przekazać wiele opcji do <SelectControl/>WordPress Gutenberg). Wbudowany <CheckboxControl/>nie miał opcji, ale po pewnym przeszukiwaniu sieci znalazłem [react-checkbox-list](https://github.com/sonyan/react-checkbox-list) Sony An (dostępny jak react-checkbox-listna npm ).
To zrobiło wszystko, co chciałem, ale po zainstalowaniu go przez npm (npm install react-checkbox-list --save) nie działało. Wiedziałem, że będę musiał rozwidleć i załatać wtyczkę.
Zauważ, że ten samouczek obejmuje łatanie istniejących React.createClassi React.propTypesmetod. Jeśli chcesz dowiedzieć się, jak je załatać za pomocą preferowanej metody użycia [React.Component](https://mattwatson.codes/converting-react-createclass-to-react-component/) , zapoznaj się z postem na ten temat.
Łatanie komponentu React
Pierwszym problemem, na który natkniesz się, jest to, że komponent się nawet nie załaduje, i pojawi się raczej paskudny Uncaught TypeError: Cannot read property 'array' of undefinedbłąd.
Nieprzechwycony błąd typu, nie można odczytać właściwości „tablicy" niezdefiniowanej
Dzieje się tak, ponieważ Komponent zawiera następujący wiersz defaultData: React.PropTypes.array,i to dlatego React.PropTypes, że jest niezdefiniowany.
React.PropTypes jest niezdefiniowany
Trochę zbadania dokumentacji Reacta pokazuje, że [React.PropTypes](https://reactjs.org/docs/typechecking-with-proptypes.html) przeniesiono ją do innego pakietu w wersji 15.5 Reacta. Radzi nam zamiast tego użyć biblioteki prop-types.
Daje nawet link do repozytorium npm dla biblioteki prop-types. Więc śmiało zainstalujmy bibliotekę prop-types.
npm install --save prop-types
U góry naszego dokumentu zaimportujmy prop-typesbibliotekę. Nowoczesny sposób wymagałby użycia [import](https://mattwatson.codes/converting-react-createclass-to-react-component/) składni, ale na razie trzymajmy się tej samej składni dodaj var PropTypes = require('prop-types');do poniższego dokumentu, w którym deklarujemy React. Deklaracja otwarcia powinna teraz wyglądać mniej więcej tak:
'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
},
...
Świetne rzeczy! Jednak nadal otrzymujemy komunikat o 'array' of undefinedbłędzie. To dlatego, że używana składnia jest taka React.PropTypes.array, a my właśnie zadeklarowaliśmy nasze PropTypes do używania zmiennej PropTypes. Tak więc prostą poprawką jest znalezienie i zastąpienie wszystkich wystąpień React.PropTypesz PropTypes.
Nasz otwierający blok kodu powinien teraz wyglądać tak:
'use strict';
var React = require('react');
var PropTypes = require('prop-types');
module.exports = React.createClass({
displayName: 'CheckBoxList',
propTypes: {
defaultData: PropTypes.array,
onChange: PropTypes.func
},
...
No to zaczynamy, nasz problem z PropTypes został rozwiązany! Odświeżmy nasz komponent i zobaczmy, czy działa.
Nie, teraz pojawia się błądUncaught TypeError: React.createClass is not a function.
Uncaught TypeError: React.createClass nie jest funkcją.
Ponownie, krótkie przeszukanie dokumentacji Reacta i informacji o wydaniu wersji 15.5.0 pokazuje, że React.createClasszostała ona przestarzała w wersji 15.5.0.
Wraz z React.PropTypes, React.createClasszostał zrefaktoryzowany do własnego pakietu, jako preferowana metoda tworzenia React Components wykorzystuje [React.Component](https://mattwatson.codes/converting-react-createclass-to-react-component/).
Zamiennik dla React.createClass znajduje się teraz we własnym repozytorium npm jako create-react-class. Więc śmiało zainstalujmy to w naszej kompilacji.
npm install --save create-react-class
Musimy zaimportować pakiet do naszej kompilacji, ponownie zachowując składnię w klasycznym formacie, dodając linię var CreateReactClass = require('create-react-class');na górze dokumentu, na przykład:
'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
},
...
Ponownie, nasz błąd nie zniknie, ponieważ musimy zastąpić wszystkie instancje React.createClassnaszym nowym zaimportowanym obiektem CreateReactClass. To powinno wyglądać trochę tak:
'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
},
...
I to wszystko! Komponent nie ma już błędów, a nasza konsola JavaScript jest ładna i czysta.
Gotowe rozwiązanie wygląda trochę tak:
Poprawiony składnik listy kontrolnej wielokrotnego reagowania w WordPress Gutenberg
Kod źródłowy samouczka
Możesz pobrać kod źródłowy oryginalnej i poprawionej wersji komponentu z serwisu GitHub. Wtyczka zawiera blok WordPress Gutenberg, którego możesz użyć do zabawy z kodem, z trzema plikami, które możesz usunąć, jeśli dotyczy:
Pliki samouczka GitHub dla poprawki React.createClass
Przesyłanie pull request do oryginalnego repozytorium
Wspaniałą rzeczą w społeczności open source jest to, że możemy wnosić swój wkład i ulepszać kod. Oto pull request z poprawką, którą właśnie stworzyłem, i który przesłałem do Sony An.