{"id":228524,"date":"2022-10-12T10:49:00","date_gmt":"2022-10-12T07:49:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228524"},"modified":"2022-11-09T02:51:18","modified_gmt":"2022-11-08T23:51:18","slug":"componente-react-createclass-quebrado-vamos-corrigi-lo","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/componente-react-createclass-quebrado-vamos-corrigi-lo\/","title":{"rendered":"Componente React.createClass quebrado? Vamos corrigi-lo!"},"content":{"rendered":"\n

Se voc\u00ea est\u00e1 construindo WordPress Gutenberg Blocks (ou mesmo se n\u00e3o estiver), voc\u00ea pode estar tentando fazer com que um componente React de terceiros funcione em seu build<\/a>. Mas se for um elemento mais antigo, especificamente um que usa o React.createClass<\/code>m\u00e9todo obsoleto, voc\u00ea pode ficar preso.<\/p>\n

Os arquivos que acompanham este tutorial est\u00e3o nas pastas originais e corrigidas na pasta de componentes da solu\u00e7\u00e3o GitHub.<\/p>\n

Obter arquivos de tutorial do GitHub<\/a><\/p>\n

Eu estava procurando por uma lista de caixas de sele\u00e7\u00e3o que me permitisse passar uma variedade de op\u00e7\u00f5es (semelhante a como voc\u00ea pode passar v\u00e1rias op\u00e7\u00f5es para o <SelectControl\/><\/code>WordPress Gutenberg). O built-in <CheckboxControl\/><\/code>n\u00e3o tinha uma op\u00e7\u00e3o, mas depois de algumas pesquisas na web eu encontrei [react-checkbox-list](https:\/\/github.com\/sonyan\/react-checkbox-list)<\/code> pela Sony An<\/a> (dispon\u00edvel como react-checkbox-list<\/code>em npm<\/a> ).<\/p>\n

Isso fez tudo o que eu queria, mas depois de instal\u00e1-lo via npm (npm install react-checkbox-list --save<\/code>) n\u00e3o funcionou. Eu sabia que teria que fazer um fork e corrigir o plugin.<\/p>\n

Observe que este tutorial abrange a corre\u00e7\u00e3o dos m\u00e9todos React.createClass<\/code>e existentes React.propTypes<\/code>. Se voc\u00ea estiver interessado em aprender como corrigi-los com o m\u00e9todo preferido de uso<\/a> [React.Component](https:\/\/mattwatson.codes\/converting-react-createclass-to-react-component\/)<\/code> , veja o post sobre esse t\u00f3pico<\/a>.<\/p>\n

Corrigindo o componente React<\/h2>\n

O primeiro problema que voc\u00ea encontrar\u00e1 \u00e9 que o componente nem ser\u00e1 carregado e voc\u00ea receber\u00e1 um Uncaught TypeError: Cannot read property 'array' of undefined<\/code>erro bastante desagrad\u00e1vel.<\/p>\n

TypeError n\u00e3o capturado, n\u00e3o \u00e9 poss\u00edvel ler a propriedade ‘array’ de indefinido<\/p>\n

Isso ocorre porque o Component cont\u00e9m a linha a seguir defaultData: React.PropTypes.array,<\/code>e \u00e9 porque React.PropTypes<\/code>ela \u00e9 indefinida.<\/p>\n

\"ComponenteReact.PropTypes \u00e9 indefinido<\/p>\n

Um pouco de investiga\u00e7\u00e3o na documenta\u00e7\u00e3o do React mostra que<\/a> [React.PropTypes](https:\/\/reactjs.org\/docs\/typechecking-with-proptypes.html)<\/code> foi movido para um pacote diferente no React vers\u00e3o 15.5<\/a>. Ele nos aconselha a usar a biblioteca prop-types.<\/p>\n

Ele ainda fornece um link para o reposit\u00f3rio npm para a biblioteca prop-types<\/a>. Ent\u00e3o vamos em frente e instale a biblioteca prop-types.<\/p>\n

npm install --save prop-types\n<\/code><\/pre>\n
Na parte superior do nosso documento, vamos importar a prop-types<\/code>biblioteca. A maneira moderna disso nos faria usar a<\/a> [import](https:\/\/mattwatson.codes\/converting-react-createclass-to-react-component\/)<\/code> sintaxe<\/a>, mas por enquanto, vamos manter a mesma sintaxe adicionada var PropTypes = require('prop-types');<\/code>ao documento abaixo onde declaramos React<\/code>. A declara\u00e7\u00e3o de abertura agora deve ser algo assim:<\/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
Coisas boas! No entanto, ainda recebemos a 'array' of undefined<\/code>mensagem de erro. Bem, isso \u00e9 porque a sintaxe que est\u00e1 sendo usada \u00e9 React.PropTypes.array<\/code>e acabamos de declarar nossos PropTypes para usar a vari\u00e1vel PropTypes<\/code>. Portanto, a corre\u00e7\u00e3o simples \u00e9 localizar e substituir todas as inst\u00e2ncias de React.PropTypes<\/code>por PropTypes<\/code>.<\/p>\n
Nosso bloco de c\u00f3digo de abertura agora deve ficar assim:<\/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
Pronto, nosso problema de PropTypes est\u00e1 resolvido! Vamos atualizar nosso componente e ver se funciona.<\/p>\n
N\u00e3o, agora temos o erroUncaught TypeError: React.createClass is not a function.<\/code><\/p>\n
\"Componente\"ComponenteTypeError n\u00e3o capturado: React.createClass n\u00e3o \u00e9 uma fun\u00e7\u00e3o.\ufeff<\/p>\n
Novamente, uma pequena pesquisa em torno da documenta\u00e7\u00e3o do React e notas de lan\u00e7amento para v15.5.0<\/a> nos mostra que React.createClass<\/code>foi depreciado na vers\u00e3o 15.5.0.<\/p>\n
Junto com React.PropTypes<\/code>, React.createClass<\/code>foi refatorado em seu pr\u00f3prio pacote, j\u00e1 que o m\u00e9todo preferido de cria\u00e7\u00e3o de componentes React usa<\/a> [React.Component](https:\/\/mattwatson.codes\/converting-react-createclass-to-react-component\/)<\/code>.<\/p>\n
A substitui\u00e7\u00e3o para React.createClass agora est\u00e1 em seu pr\u00f3prio reposit\u00f3rio npm como create-react-class<\/a>. Ent\u00e3o vamos em frente e instalar isso em nosso build.<\/p>\n
npm install --save create-react-class\n<\/code><\/pre>\n
Precisamos importar o pacote para nossa compila\u00e7\u00e3o, novamente mantendo a sintaxe no formato cl\u00e1ssico, adicione a linha var CreateReactClass = require('create-react-class');<\/code>no topo do documento, assim:<\/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
Novamente, nosso erro n\u00e3o desaparecer\u00e1, porque precisamos substituir todas as inst\u00e2ncias de React.createClass<\/code>pelo nosso novo objeto importado CreateReactClass<\/code>. Isso deve se parecer um pouco com isso:<\/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
E \u00e9 isso! O componente n\u00e3o apresenta mais erros e nosso console JavaScript \u00e9 agrad\u00e1vel e limpo.<\/p>\n
A solu\u00e7\u00e3o finalizada se parece um pouco com isso:<\/p>\n
\"ComponenteO componente Patched React Multiple Checklist no WordPress Gutenberg<\/p>\n
C\u00f3digo-fonte do tutorial<\/h2>\n
Voc\u00ea pode baixar o c\u00f3digo-fonte da vers\u00e3o original e corrigida do componente no GitHub<\/a>. O plugin cont\u00e9m um bloco WordPress Gutenberg que voc\u00ea pode usar para brincar com o c\u00f3digo, com tr\u00eas arquivos que voc\u00ea pode excluir conforme aplic\u00e1vel:<\/p>\n
\"ComponenteOs arquivos de tutorial do GitHub para o patch React.createClass<\/p>\n
Enviando uma solicita\u00e7\u00e3o pull para o reposit\u00f3rio original<\/h2>\n
O melhor da comunidade de c\u00f3digo aberto \u00e9 que somos livres para contribuir e melhorar o c\u00f3digo. Aqui est\u00e1 o Pull Request com o patch que acabei de criar e<\/a> que enviei para a Sony An.<\/p>\n
Fonte de grava\u00e7\u00e3o:  wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Se voc\u00ea est\u00e1 construindo WordPress Gutenberg Blocks (ou mesmo se n\u00e3o estiver), voc\u00ea pode estar tentando fazer com que um componente React de terceiros funcione em sua compila\u00e7\u00e3o. Mas se for um elemento mais antigo, …<\/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":[898,722,920,846],"tags":[1170],"class_list":["post-228524","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo-2","category-desenvolvedor","category-outro","category-tutoriais","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/228524","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/comments?post=228524"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/228524\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media\/224207"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=228524"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=228524"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=228524"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}