¿Componente roto React.createClass? ¡Arreglemoslo!

Si está creando bloques Gutenberg de WordPress (o incluso si no lo está haciendo), es posible que esté intentando que un componente React de terceros funcione en su compilación. Pero si es un elemento más antiguo, específicamente uno que usa el React.createClassmétodo obsoleto, es posible que se quede atascado.

Los archivos que acompañan a este tutorial están en las carpetas originales y parcheadas en la carpeta de componentes de la solución de GitHub.

Obtener archivos de tutoriales de GitHub

Estaba buscando una lista de casillas de verificación que me permitiera pasar una variedad de opciones (similar a cómo podría pasar múltiples opciones <SelectControl/>en WordPress Gutenberg). El incorporado <CheckboxControl/>no tenía una opción, pero después de buscar en la web encontré [react-checkbox-list](https://github.com/sonyan/react-checkbox-list) Sony An (disponible como react-checkbox-listen npm ).

Esto hizo todo lo que quería que hiciera, pero después de instalarlo a través de npm (npm install react-checkbox-list --save) no funcionó. Sabía que tendría que bifurcar y parchear el complemento.

Tenga en cuenta que este tutorial cubre la aplicación de parches a los React.createClassmétodos React.propTypesexistentes. Si está interesado en aprender cómo parchearlos con el método preferido de uso [React.Component](https://mattwatson.codes/converting-react-createclass-to-react-component/) , consulte la publicación sobre ese tema.

Parchear el componente React

El primer problema con el que se encontrará es que el componente ni siquiera se cargará y se le presentará un Uncaught TypeError: Cannot read property 'array' of undefinederror bastante desagradable.

TypeError no capturado, no se puede leer la propiedad ‘matriz’ de indefinido

Esto se debe a que el Componente contiene la siguiente línea defaultData: React.PropTypes.array,y se debe a React.PropTypesque no está definido.

React.PropTypes no está definido

Un poco de investigación en la documentación de React muestra que [React.PropTypes](https://reactjs.org/docs/typechecking-with-proptypes.html) se movió a un paquete diferente en React versión 15.5. Nos aconseja usar la biblioteca prop-types en su lugar.

Incluso le brinda un enlace al repositorio de npm para la biblioteca de tipos de prop. Así que sigamos adelante e instalemos la biblioteca de tipos de accesorios.

npm install --save prop-types

En la parte superior de nuestro documento, importemos la prop-typesbiblioteca. La forma moderna de esto nos haría usar la [import](https://mattwatson.codes/converting-react-createclass-to-react-component/) sintaxis, pero por ahora, mantengamos la misma sintaxis agregada var PropTypes = require('prop-types');al documento a continuación donde declaramos React. La declaración de apertura ahora debería verse algo así:

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

¡Buena cosa! Sin embargo, seguimos recibiendo el 'array' of undefinedmensaje de error. Bueno, eso es porque la sintaxis que se usa es React.PropTypes.arrayy simplemente declaramos nuestros PropTypes para usar la variable PropTypes. Entonces, la solución simple es encontrar y reemplazar todas las instancias de React.PropTypescon PropTypes.

Nuestro bloque de código de apertura ahora debería verse así:

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

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

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

Ahí vamos, ¡nuestro problema de PropTypes ahora está resuelto! Actualicemos nuestro componente y veamos si funciona.

No, ahora obtenemos el error.Uncaught TypeError: React.createClass is not a function.

TypeError no detectado: React.createClass no es una función.

Nuevamente, una pequeña búsqueda en la documentación de React y las notas de la versión para v15.5.0 nos muestra que React.createClassse depreció en la versión 15.5.0.

Junto con React.PropTypes, React.createClassse refactorizó en su propio paquete, ya que el método preferido para crear componentes de React utiliza [React.Component](https://mattwatson.codes/converting-react-createclass-to-react-component/).

El reemplazo de React.createClass ahora está en su propio repositorio npm como create-react-class. Así que sigamos adelante e instalemos esto en nuestra compilación.

npm install --save create-react-class

Necesitamos importar el paquete a nuestra compilación, nuevamente manteniendo la sintaxis en el formato clásico, agregue la línea var CreateReactClass = require('create-react-class');en la parte superior del documento, así:

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

Nuevamente, nuestro error no desaparecerá, porque necesitamos reemplazar todas las instancias de React.createClasscon nuestro nuevo objeto importado CreateReactClass. Eso debería verse un poco como esto:

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

¡Y eso es! El componente ya no genera errores y nuestra consola de JavaScript es agradable y limpia.

La solución final se parece un poco a esto:

El componente Patched React Multiple Checklist en WordPress Gutenberg

Código fuente del tutorial

Puede descargar el código fuente de la versión original y parcheada del componente en GitHub. El complemento contiene un bloque de WordPress Gutenberg que puede usar para jugar con el código, con tres archivos que puede eliminar según corresponda:

Los archivos de tutorial de GitHub para el parche React.createClass

Envío de una solicitud de extracción al repositorio original

Lo mejor de la comunidad de código abierto es que somos libres de contribuir y mejorar el código. Aquí está el Pull Request con el parche que acabo de crear y que envié a Sony An.