Зламаний компонент React.createClass? Давайте виправимо це!

Останнє оновлення Лис 9, 2022

Зміст

Надсилання запиту на витяг до оригінального сховища

Якщо ви створюєте WordPress Gutenberg Blocks (або навіть якщо ви ні), можливо, ви намагаєтеся змусити сторонній компонент React працювати у вашій збірці. Але якщо це старіший елемент, зокрема той, який використовує застарілий React.createClassметод, ви можете застрягти.

Файли, які супроводжують цей підручник, знаходяться в оригінальних папках і виправлених папках у папці компонентів рішення GitHub.

Отримайте навчальні файли з GitHub

Я шукав список прапорців, який дозволив би мені передати набір параметрів (подібно до того, як ви можете передати кілька параметрів <SelectControl/>у WordPress Gutenberg). Вбудований <CheckboxControl/>не мав опції, але після деякого пошуку в Інтернеті я знайшов [react-checkbox-list](https://github.com/sonyan/react-checkbox-list) Sony An (доступний як react-checkbox-listна npm ).

Це зробило все, що я хотів, але після встановлення через npm (npm install react-checkbox-list --save) це не спрацювало. Я знав, що мені доведеться розгалужувати та виправляти плагін.

Зауважте, що цей підручник охоплює виправлення існуючих методів React.createClassі. Якщо ви зацікавлені в тому, щоб дізнатися, як виправити їх за допомогою бажаного методу використання , перегляньте публікацію на цю тему.React.propTypes [React.Component](https://mattwatson.codes/converting-react-createclass-to-react-component/)

Виправлення компонента React

Перша проблема, з якою ви зіткнетеся, полягає в тому, що компонент навіть не завантажиться, і вам буде представлено досить неприємну Uncaught TypeError: Cannot read property 'array' of undefinedпомилку.

Uncaught TypeError, неможливо прочитати властивість ‘array’ невизначеного

Це тому, що компонент містить наступний рядок defaultData: React.PropTypes.array,, і це тому React.PropTypes, що він не визначений.

React.PropTypes не визначено

Невелике дослідження документації React показує, що вона [React.PropTypes](https://reactjs.org/docs/typechecking-with-proptypes.html) переміщена в інший пакет у React версії 15.5. Він радить нам замість цього використовувати бібліотеку prop-types.

Він навіть дає вам посилання на репозиторій npm для бібліотеки prop-types. Отже, давайте встановимо бібліотеку prop-types.


npm install --save prop-types

У верхній частині нашого документа давайте імпортуємо prop-typesбібліотеку. Сучасний спосіб цього змусить нас використовувати [import](https://mattwatson.codes/converting-react-createclass-to-react-component/) синтаксис, але поки що давайте збережемо той самий синтаксис, доданий var PropTypes = require('prop-types');до документа нижче, де ми оголошуємо React. Початкова декларація тепер має виглядати приблизно так:


'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
    },
...

Чудова штука! Однак ми все одно отримуємо повідомлення про 'array' of undefinedпомилку. Це тому, що використовується такий синтаксис, React.PropTypes.arrayі ми щойно оголосили наші PropTypes для використання змінної PropTypes. Отже, просте рішення полягає в тому, щоб знайти та замінити всі екземпляри React.PropTypesна PropTypes.

Наш початковий блок коду тепер має виглядати так:


'use strict';
var React     = require('react');
var PropTypes = require('prop-types');

module.exports = React.createClass({
    displayName: 'CheckBoxList',

    propTypes: {
        defaultData: PropTypes.array,
        onChange: PropTypes.func
    },
...

Отже, наша проблема PropTypes тепер вирішена! Давайте оновимо наш компонент і перевіримо, чи він працює.

Ні, тепер ми отримуємо помилкуUncaught TypeError: React.createClass is not a function.

Uncaught TypeError: React.createClass не є функцією.

Знову ж таки, невеликий пошук у документації React і примітках до випуску версії 15.5.0 показує нам, що React.createClassу версії 15.5.0 було знецінено.

Разом із React.PropTypes, React.createClassбуло перероблено у власний пакет, оскільки для створення компонентів React використовується найкращий метод [React.Component](https://mattwatson.codes/converting-react-createclass-to-react-component/).

Заміна для React.createClass тепер у власному репозиторії npm як create-react-class. Отже, давайте встановимо це в нашу збірку.


npm install --save create-react-class

Нам потрібно імпортувати пакет у нашу збірку, знову зберігши синтаксис у класичному форматі, додати рядок var CreateReactClass = require('create-react-class');у верхній частині документа, наприклад:


'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
    },
...

Знову ж таки, наша помилка не зникне, оскільки нам потрібно замінити всі екземпляри React.createClassновим імпортованим об’єктом CreateReactClass. Це має виглядати приблизно так:


'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
    },
...

І це все! Компонент більше не видає помилок, і наша консоль JavaScript гарна та чиста.

Готове рішення виглядає приблизно так:

Виправлений компонент React Multiple Checklist у WordPress Gutenberg

Вихідний код підручника

Ви можете завантажити вихідний код для оригінальної та виправленої версії компонента на GitHub. Плагін містить блок WordPress Gutenberg, який можна використовувати, щоб пограти з кодом, із трьома файлами, які можна видалити, якщо це необхідно:

Файли посібників GitHub для патча React.createClass

Надсилання запиту на витяг до оригінального сховища

Чудова річ спільноти з відкритим кодом полягає в тому, що ми можемо вільно робити внески та покращувати код. Ось запит на вилучення з щойно створеним мною патчем, який я надіслав Sony An.

Джерело запису: wholesomecode.ltd