{"id":228079,"date":"2022-10-12T18:40:00","date_gmt":"2022-10-12T15:40:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228079"},"modified":"2022-11-09T00:36:28","modified_gmt":"2022-11-08T21:36:28","slug":"konwersja-react-createclass-do-react-component","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/konwersja-react-createclass-do-react-component\/","title":{"rendered":"Konwersja React.createClass do React.Component"},"content":{"rendered":"\n

W moim ostatnim artykule m\u00f3wi\u0142em o \u0142ataniu starszych wersji Reacta, aby dzia\u0142a\u0142y w nowoczesnym \u015brodowisku<\/a>. W tym artykule id\u0119 krok po kroku i krok po kroku, jak uaktualni\u0107 klasyczny komponent React do nowoczesnego, zmieniaj\u0105c React.createClass<\/code>spos\u00f3b robienia rzeczy na nowoczesn\u0105 i preferowan\u0105 React.Component<\/code>metod\u0119.<\/p>\n

Potrzebne nam pliki b\u0119d\u0105 znajdowa\u0107 si\u0119 w folderach \u201eOriginal" i \u201eFinal” katalogu komponent\u00f3w w towarzysz\u0105cym rozwi\u0105zaniu GitHub.<\/p>\n

Pobierz pliki samouczka z GitHub<\/a><\/p>\n

Znowu praca z komponentem [react-checkbox-list](https:\/\/github.com\/sonyan\/react-checkbox-list)<\/code> Sony An<\/a> (dost\u0119pny jak react-checkbox-list<\/code>na npm<\/a> ). Ten przewodnik pokazuje krok po kroku, jak zast\u0105pi\u0107 konstrukcj\u0119 i metody klasycznego React.createClass<\/code>komponentu nowoczesnym React.Component<\/code>.<\/p>\n

Zaczynaj\u0105c od .jsx<\/code>pliku w react-checkbox-list<\/code>rozwi\u0105zaniu, najpierw usuniemy .js<\/code>plik i zmienimy jego nazw\u0119, .js<\/code>poniewa\u017c .jsx<\/code>pliki nie musz\u0105 ju\u017c mie\u0107 innych nazw.<\/p>\n

To daje nam nast\u0119puj\u0105cy kod startowy:<\/p>\n

\n'use strict';\nvar React = require('react');\n\nmodule.exports = React.createClass({\n    displayName: 'CheckBoxList',\n\n    propTypes: {\n        defaultData: React.PropTypes.array,\n        onChange: React.PropTypes.func\n    },\n\n    getInitialState: function() {\n        return {\n            data: this.props.defaultData || []\n        };\n    },\n\n    handleItemChange: function(e) {\n        var selectedValues = [],\n            newData = [];\n\n        this.state.data.forEach(function(item) {\n            if(item.value === e.target.value) {\n                item.checked = e.target.checked;\n            }\n            if(item.checked) {\n                selectedValues.push(item.value);\n            }\n            newData.push(item);\n        });\n\n        this.setState({data: newData});\n\n        if(this.props.onChange) {\n            this.props.onChange(selectedValues);\n        }\n    },\n\n    reset: function() {\n        var newData = [];\n        this.state.data.forEach(function(item) {\n            item.checked = false;\n            newData.push(item);\n        });\n\n        this.setState({data: newData});\n    },\n\n    checkAll: function() {\n        var newData = [];\n        this.state.data.forEach(function(item) {\n            item.checked = true;\n            newData.push(item);\n        });\n\n        this.setState({data: newData});\n    },\n\n    render: function() {\n        var options;\n\n        options = this.state.data.map(function(item, index) {\n            return (<div key={'chk-' + index} className=\"checkbox\">\n                    <label>\n                        <input\n                            type=\"checkbox\"\n                            value={item.value}\n                            onChange={this.handleItemChange}\n                            checked={item.checked? true: false} \/> {item.label}\n                    <\/label>\n                <\/div>\n            );\n        }.bind(this));\n\n        return (<div>\n                {options}\n            <\/div>\n        );\n    }\n});\n<\/code><\/pre>\n
Konwersja komponentu<\/h2>\n
Podczas pr\u00f3by za\u0142adowania tego kodu pierwszym b\u0142\u0119dem, jaki otrzymujemy, jestUncaught Error: Module build failed: SyntaxError: The @jsx React.DOM pragma has been deprecated as of React 0.12<\/code><\/p>\n
Nieprzechwycony b\u0142\u0105d: Budowa modu\u0142u nie powiod\u0142a si\u0119: SyntaxError: Pragma @jsx<\/a> React.DOM zosta\u0142a uznana za przestarza\u0142\u0105 w React 0.12<\/p>\n
\u0141atwo to naprawi\u0107. Po prostu usu\u0144 lini\u0119 \/** @jsx React.DOM *\/<\/code>z g\u00f3ry dokumentu.<\/p>\n
Otrzymujemy teraz ten Uncaught TypeError: Cannot read property 'array' of undefined<\/code>sam b\u0142\u0105d, co w samouczku dotycz\u0105cym<\/a> \u0142atania<\/a>. Dzieje si\u0119 tak dlatego, \u017ce React.propTypes by\u0142 przestarza\u0142y w wersji React 15.50, wi\u0119c zgodnie z tym samouczkiem zainstaluj pakiet PropTypes za pomoc\u0105 polecenia przez npm. Zaimportujemy to p\u00f3\u017aniej do naszego pakietu.[React.createClass](https:\/\/wholesomecode.ltd\/blog\/broken-react-createclass-component-lets-fix-it\/)<\/code><\/a><\/p>\n
npm install --save prop-types\n<\/code><\/pre>\n
To, co nast\u0119puje teraz, to kompletna przebudowa bazy kodu, wi\u0119c nie mo\u017cemy od\u015bwie\u017cy\u0107 i naprawi\u0107 b\u0142\u0119du, jak mogli\u015bmy to zrobi\u0107 wcze\u015bniej, wi\u0119c nie b\u0119dziemy wiedzie\u0107, czy zadzia\u0142a\u0142o to do samego ko\u0144ca. Bra\u0107 si\u0119 do rzeczy!<\/p>\n
Zacznijmy od zast\u0105pienia React.createClass<\/code>funkcji przez zadeklarowanie nowego React.Component<\/code>. Zmie\u0144 nasz kod tak, aby wygl\u0105da\u0142 nast\u0119puj\u0105co:<\/p>\n
'use strict';\nimport React from 'react';\n\nclass CheckBoxList extends React.Component {\n...\n}\n<\/code><\/pre>\n
Zauwa\u017c, \u017ce zrobili\u015bmy tutaj kilka rzeczy:<\/p>\n