{"id":228187,"date":"2022-10-12T18:40:00","date_gmt":"2022-10-12T15:40:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228187"},"modified":"2022-11-09T01:11:50","modified_gmt":"2022-11-08T22:11:50","slug":"react-createclassi-teisendamine-react-componentiks","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/et\/react-createclassi-teisendamine-react-componentiks\/","title":{"rendered":"React.createClassi teisendamine React.Componentiks"},"content":{"rendered":"\n

Oma viimases artiklis r\u00e4\u00e4kisin Reacti vanemate versioonide paikamisest, et need t\u00f6\u00f6taksid kaasaegses keskkonnas<\/a>. Selles artiklis l\u00e4hen edasi ja annan samm-sammult juhise klassikalise Reacti komponendi uuendamiseks kaasaegseks, l\u00fclitades React.createClass<\/code>asjade tegemise moodsale ja eelistatud React.Component<\/code>meetodile.<\/p>\n

Vajalikud failid asuvad kaasasoleva GitHubi lahenduse komponentide kataloogi kaustades "Original" ja "Final".<\/p>\n

Hankige \u00f5petusfailid GitHubist<\/a><\/p>\n

Taas t\u00f6\u00f6tan [react-checkbox-list](https:\/\/github.com\/sonyan\/react-checkbox-list)<\/code> Sony Ani<\/a> komponendiga (saadaval react-checkbox-list<\/code>npm-na<\/a> ). See juhend n\u00e4itab samm-sammult, kuidas asendada klassikalise React.createClass<\/code>komponendi struktuur ja meetodid kaasaegsega React.Component<\/code>.<\/p>\n

Alustades lahenduses olevast .jsx<\/code>failist, react-checkbox-list<\/code>kustutame esmalt .js<\/code>faili ja nimetame selle \u00fcmber, .js<\/code>kuna .jsx<\/code>faile ei pea enam teisiti nimetama.<\/p>\n

See annab meile j\u00e4rgmise alguskoodi:<\/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
Komponendi teisendamine<\/h2>\n
Selle koodi laadimisel ilmneb esimene vigaUncaught Error: Module build failed: SyntaxError: The @jsx React.DOM pragma has been deprecated as of React 0.12<\/code><\/p>\n
Tabamata viga: mooduli koostamine eba\u00f5nnestus: s\u00fcntaksiviga: @jsx<\/a> React.DOM pragma on alates Reacti versioonist 0.12 aegunud<\/p>\n
Selle parandamiseks on piisavalt lihtne. Eemaldage lihtsalt joon \/** @jsx React.DOM *\/<\/code>dokumendi \u00fclaosast.<\/p>\n
N\u00fc\u00fcd saame vea Uncaught TypeError: Cannot read property 'array' of undefined<\/code>samamoodi nagu lappimise<\/a> [React.createClass](https:\/\/wholesomecode.ltd\/blog\/broken-react-createclass-component-lets-fix-it\/)<\/code>\u00f5petuses<\/a>. Selle p\u00f5hjuseks on asjaolu, et React.propTypes oli Reacti versioonis 15.50 aegunud, nii et selle \u00f5petuse j\u00e4rgi installige pakett PropTypes k\u00e4suga npm kaudu. Impordime selle hiljem oma paketti.<\/p>\n
npm install --save prop-types\n<\/code><\/pre>\n
N\u00fc\u00fcd j\u00e4rgneb koodibaasi t\u00e4ielik uuendamine, nii et me ei saa v\u00e4rskendada ega viga parandada, nagu oleme varem teinud, nii et me ei tea, kas see on t\u00f6\u00f6tanud kuni p\u00e4ris l\u00f5puni. Pane kinni!<\/p>\n
Alustame funktsiooni asendamisest React.createClass<\/code>uue deklareerimisega React.Component<\/code>. Muutke meie koodi nii, et see n\u00e4eks v\u00e4lja j\u00e4rgmine:<\/p>\n
'use strict';\nimport React from 'react';\n\nclass CheckBoxList extends React.Component {\n...\n}\n<\/code><\/pre>\n
Pange t\u00e4hele, et oleme siin teinud m\u00f5ned asjad:<\/p>\n