Сломанный компонент React.createClass? Давайте исправим это!

Последнее обновление Авг 8, 2022

Содержание

Отправка запроса на извлечение в исходный репозиторий

Если вы создаете блоки WordPress Gutenberg (или даже если вы этого не делаете), возможно, вы пытаетесь заставить сторонний компонент 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, Не удается прочитать массив свойств неопределенного

Это связано с тем, что компонент содержит следующую строку, 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