{"id":228194,"date":"2022-10-12T10:49:00","date_gmt":"2022-10-12T07:49:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228194"},"modified":"2022-11-09T01:13:28","modified_gmt":"2022-11-08T22:13:28","slug":"componente-roto-react-createclass-arreglemoslo","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/componente-roto-react-createclass-arreglemoslo\/","title":{"rendered":"\u00bfComponente roto React.createClass? \u00a1Arreglemoslo!"},"content":{"rendered":"\n

Si est\u00e1 creando bloques Gutenberg de WordPress (o incluso si no lo est\u00e1 haciendo), es posible que est\u00e9 intentando que un componente React de terceros funcione en su compilaci\u00f3n<\/a>. Pero si es un elemento m\u00e1s antiguo, espec\u00edficamente uno que usa el React.createClass<\/code>m\u00e9todo obsoleto, es posible que se quede atascado.<\/p>\n

Los archivos que acompa\u00f1an a este tutorial est\u00e1n en las carpetas originales y parcheadas en la carpeta de componentes de la soluci\u00f3n de GitHub.<\/p>\n

Obtener archivos de tutoriales de GitHub<\/a><\/p>\n

Estaba buscando una lista de casillas de verificaci\u00f3n que me permitiera pasar una variedad de opciones (similar a c\u00f3mo podr\u00eda pasar m\u00faltiples opciones <SelectControl\/><\/code>en WordPress Gutenberg). El incorporado <CheckboxControl\/><\/code>no ten\u00eda una opci\u00f3n, pero despu\u00e9s de buscar en la web encontr\u00e9 [react-checkbox-list](https:\/\/github.com\/sonyan\/react-checkbox-list)<\/code> Sony An<\/a> (disponible como react-checkbox-list<\/code>en npm<\/a> ).<\/p>\n

Esto hizo todo lo que quer\u00eda que hiciera, pero despu\u00e9s de instalarlo a trav\u00e9s de npm (npm install react-checkbox-list --save<\/code>) no funcion\u00f3. Sab\u00eda que tendr\u00eda que bifurcar y parchear el complemento.<\/p>\n

Tenga en cuenta que este tutorial cubre la aplicaci\u00f3n de parches a los React.createClass<\/code>m\u00e9todos React.propTypes<\/code>existentes. Si est\u00e1 interesado en aprender c\u00f3mo parchearlos con el m\u00e9todo preferido de uso<\/a> [React.Component](https:\/\/mattwatson.codes\/converting-react-createclass-to-react-component\/)<\/code> , consulte la publicaci\u00f3n sobre ese tema<\/a>.<\/p>\n

Parchear el componente React<\/h2>\n

El primer problema con el que se encontrar\u00e1 es que el componente ni siquiera se cargar\u00e1 y se le presentar\u00e1 un Uncaught TypeError: Cannot read property 'array' of undefined<\/code>error bastante desagradable.<\/p>\n

TypeError no capturado, no se puede leer la propiedad ‘matriz’ de indefinido<\/p>\n

Esto se debe a que el Componente contiene la siguiente l\u00ednea defaultData: React.PropTypes.array,<\/code>y se debe a React.PropTypes<\/code>que no est\u00e1 definido.<\/p>\n

\"\u00bfComponenteReact.PropTypes no est\u00e1 definido<\/p>\n

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

Incluso le brinda un enlace al repositorio de npm para la biblioteca de tipos de prop<\/a>. As\u00ed que sigamos adelante e instalemos la biblioteca de tipos de accesorios.<\/p>\n

npm install --save prop-types\n<\/code><\/pre>\n
En la parte superior de nuestro documento, importemos la prop-types<\/code>biblioteca. La forma moderna de esto nos har\u00eda usar la<\/a> [import](https:\/\/mattwatson.codes\/converting-react-createclass-to-react-component\/)<\/code> sintaxis<\/a>, pero por ahora, mantengamos la misma sintaxis agregada var PropTypes = require('prop-types');<\/code>al documento a continuaci\u00f3n donde declaramos React<\/code>. La declaraci\u00f3n de apertura ahora deber\u00eda verse algo as\u00ed:<\/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
\u00a1Buena cosa! Sin embargo, seguimos recibiendo el 'array' of undefined<\/code>mensaje de error. Bueno, eso es porque la sintaxis que se usa es React.PropTypes.array<\/code>y simplemente declaramos nuestros PropTypes para usar la variable PropTypes<\/code>. Entonces, la soluci\u00f3n simple es encontrar y reemplazar todas las instancias de React.PropTypes<\/code>con PropTypes<\/code>.<\/p>\n
Nuestro bloque de c\u00f3digo de apertura ahora deber\u00eda verse as\u00ed:<\/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
Ah\u00ed vamos, \u00a1nuestro problema de PropTypes ahora est\u00e1 resuelto! Actualicemos nuestro componente y veamos si funciona.<\/p>\n
No, ahora obtenemos el error.Uncaught TypeError: React.createClass is not a function.<\/code><\/p>\n
\"\u00bfComponente\"\u00bfComponenteTypeError no detectado: React.createClass no es una funci\u00f3n.\ufeff<\/p>\n
Nuevamente, una peque\u00f1a b\u00fasqueda en la documentaci\u00f3n de React y las notas de la versi\u00f3n para v15.5.0<\/a> nos muestra que React.createClass<\/code>se depreci\u00f3 en la versi\u00f3n 15.5.0.<\/p>\n
Junto con React.PropTypes<\/code>, React.createClass<\/code>se refactoriz\u00f3 en su propio paquete, ya que el m\u00e9todo preferido para crear componentes de React utiliza<\/a> [React.Component](https:\/\/mattwatson.codes\/converting-react-createclass-to-react-component\/)<\/code>.<\/p>\n
El reemplazo de React.createClass ahora est\u00e1 en su propio repositorio npm como create-react-class<\/a>. As\u00ed que sigamos adelante e instalemos esto en nuestra compilaci\u00f3n.<\/p>\n
npm install --save create-react-class\n<\/code><\/pre>\n
Necesitamos importar el paquete a nuestra compilaci\u00f3n, nuevamente manteniendo la sintaxis en el formato cl\u00e1sico, agregue la l\u00ednea var CreateReactClass = require('create-react-class');<\/code>en la parte superior del documento, as\u00ed:<\/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
Nuevamente, nuestro error no desaparecer\u00e1, porque necesitamos reemplazar todas las instancias de React.createClass<\/code>con nuestro nuevo objeto importado CreateReactClass<\/code>. Eso deber\u00eda verse un poco como esto:<\/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
\u00a1Y eso es! El componente ya no genera errores y nuestra consola de JavaScript es agradable y limpia.<\/p>\n
La soluci\u00f3n final se parece un poco a esto:<\/p>\n
\"\u00bfComponenteEl componente Patched React Multiple Checklist en WordPress Gutenberg<\/p>\n
C\u00f3digo fuente del tutorial<\/h2>\n
Puede descargar el c\u00f3digo fuente de la versi\u00f3n original y parcheada del componente en GitHub<\/a>. El complemento contiene un bloque de WordPress Gutenberg que puede usar para jugar con el c\u00f3digo, con tres archivos que puede eliminar seg\u00fan corresponda:<\/p>\n
\"\u00bfComponenteLos archivos de tutorial de GitHub para el parche React.createClass<\/p>\n
Env\u00edo de una solicitud de extracci\u00f3n al repositorio original<\/h2>\n
Lo mejor de la comunidad de c\u00f3digo abierto es que somos libres de contribuir y mejorar el c\u00f3digo. Aqu\u00ed est\u00e1 el Pull Request con el parche que acabo de crear<\/a> y que envi\u00e9 a Sony An.<\/p>\n
Fuente de grabaci\u00f3n:  wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Si est\u00e1 creando bloques Gutenberg de WordPress (o incluso si no lo est\u00e1 haciendo), es posible que est\u00e9 intentando que un componente React de un tercero funcione en su compilaci\u00f3n. Pero si es un elemento m\u00e1s antiguo,…<\/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":[892,716,914,840],"tags":[1172],"class_list":["post-228194","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo","category-desarrollador","category-otro","category-tutoriales","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/228194","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/comments?post=228194"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/228194\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/224207"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=228194"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=228194"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=228194"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}