Componente React.createClass quebrado? Vamos corrigi-lo!
Se você está construindo WordPress Gutenberg Blocks (ou mesmo se não estiver), você pode estar tentando fazer com que um componente React de terceiros funcione em seu build. Mas se for um elemento mais antigo, especificamente um que usa o React.createClassmétodo obsoleto, você pode ficar preso.
Os arquivos que acompanham este tutorial estão nas pastas originais e corrigidas na pasta de componentes da solução GitHub.
Obter arquivos de tutorial do GitHub
Eu estava procurando por uma lista de caixas de seleção que me permitisse passar uma variedade de opções (semelhante a como você pode passar várias opções para o <SelectControl/>WordPress Gutenberg). O built-in <CheckboxControl/>não tinha uma opção, mas depois de algumas pesquisas na web eu encontrei [react-checkbox-list](https://github.com/sonyan/react-checkbox-list) pela Sony An (disponível como react-checkbox-listem npm ).
Isso fez tudo o que eu queria, mas depois de instalá-lo via npm (npm install react-checkbox-list --save) não funcionou. Eu sabia que teria que fazer um fork e corrigir o plugin.
Observe que este tutorial abrange a correção dos métodos React.createClasse existentes React.propTypes. Se você estiver interessado em aprender como corrigi-los com o método preferido de uso [React.Component](https://mattwatson.codes/converting-react-createclass-to-react-component/) , veja o post sobre esse tópico.
Corrigindo o componente React
O primeiro problema que você encontrará é que o componente nem será carregado e você receberá um Uncaught TypeError: Cannot read property 'array' of undefinederro bastante desagradável.
TypeError não capturado, não é possível ler a propriedade ‘array’ de indefinido
Isso ocorre porque o Component contém a linha a seguir defaultData: React.PropTypes.array,e é porque React.PropTypesela é indefinida.
React.PropTypes é indefinido
Um pouco de investigação na documentação do React mostra que [React.PropTypes](https://reactjs.org/docs/typechecking-with-proptypes.html) foi movido para um pacote diferente no React versão 15.5. Ele nos aconselha a usar a biblioteca prop-types.
Ele ainda fornece um link para o repositório npm para a biblioteca prop-types. Então vamos em frente e instale a biblioteca prop-types.
npm install --save prop-types
Na parte superior do nosso documento, vamos importar a prop-typesbiblioteca. A maneira moderna disso nos faria usar a [import](https://mattwatson.codes/converting-react-createclass-to-react-component/) sintaxe, mas por enquanto, vamos manter a mesma sintaxe adicionada var PropTypes = require('prop-types');ao documento abaixo onde declaramos React. A declaração de abertura agora deve ser algo assim:
'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
},
...
Coisas boas! No entanto, ainda recebemos a 'array' of undefinedmensagem de erro. Bem, isso é porque a sintaxe que está sendo usada é React.PropTypes.arraye acabamos de declarar nossos PropTypes para usar a variável PropTypes. Portanto, a correção simples é localizar e substituir todas as instâncias de React.PropTypespor PropTypes.
Nosso bloco de código de abertura agora deve ficar assim:
'use strict';
var React = require('react');
var PropTypes = require('prop-types');
module.exports = React.createClass({
displayName: 'CheckBoxList',
propTypes: {
defaultData: PropTypes.array,
onChange: PropTypes.func
},
...
Pronto, nosso problema de PropTypes está resolvido! Vamos atualizar nosso componente e ver se funciona.
Não, agora temos o erroUncaught TypeError: React.createClass is not a function.
TypeError não capturado: React.createClass não é uma função.
Novamente, uma pequena pesquisa em torno da documentação do React e notas de lançamento para v15.5.0 nos mostra que React.createClassfoi depreciado na versão 15.5.0.
Junto com React.PropTypes, React.createClassfoi refatorado em seu próprio pacote, já que o método preferido de criação de componentes React usa [React.Component](https://mattwatson.codes/converting-react-createclass-to-react-component/).
A substituição para React.createClass agora está em seu próprio repositório npm como create-react-class. Então vamos em frente e instalar isso em nosso build.
npm install --save create-react-class
Precisamos importar o pacote para nossa compilação, novamente mantendo a sintaxe no formato clássico, adicione a linha var CreateReactClass = require('create-react-class');no topo do documento, assim:
'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
},
...
Novamente, nosso erro não desaparecerá, porque precisamos substituir todas as instâncias de React.createClasspelo nosso novo objeto importado CreateReactClass. Isso deve se parecer um pouco com isso:
'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
},
...
E é isso! O componente não apresenta mais erros e nosso console JavaScript é agradável e limpo.
A solução finalizada se parece um pouco com isso:
O componente Patched React Multiple Checklist no WordPress Gutenberg
Código-fonte do tutorial
Você pode baixar o código-fonte da versão original e corrigida do componente no GitHub. O plugin contém um bloco WordPress Gutenberg que você pode usar para brincar com o código, com três arquivos que você pode excluir conforme aplicável:
Os arquivos de tutorial do GitHub para o patch React.createClass
Enviando uma solicitação pull para o repositório original
O melhor da comunidade de código aberto é que somos livres para contribuir e melhorar o código. Aqui está o Pull Request com o patch que acabei de criar e que enviei para a Sony An.