{"id":228022,"date":"2022-10-12T18:20:00","date_gmt":"2022-10-12T15:20:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228022"},"modified":"2022-11-09T00:18:06","modified_gmt":"2022-11-08T21:18:06","slug":"konvertera-react-createclass-till-react-component","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/konvertera-react-createclass-till-react-component\/","title":{"rendered":"Konvertera React.createClass till React.Component"},"content":{"rendered":"\n

I min f\u00f6rra artikel pratade jag om att patcha \u00e4ldre versioner av React f\u00f6r att fungera i en modern milj\u00f6<\/a>. I den h\u00e4r artikeln g\u00e5r jag ett steg l\u00e4ngre och ger en steg-f\u00f6r-steg-guide f\u00f6r att uppgradera en klassisk React-komponent till en modern, genom att byta ut React.createClass<\/code>s\u00e4ttet att g\u00f6ra saker p\u00e5 till den moderna och f\u00f6redragna React.Component<\/code>metoden.<\/p>\n

Filerna vi beh\u00f6ver finns i mapparna ’Original’ och ’Slutlig’ i komponentkatalogen i den medf\u00f6ljande GitHub-l\u00f6sningen.<\/p>\n

F\u00e5 handledningsfiler fr\u00e5n GitHub<\/a><\/p>\n

\u00c5terigen arbetar med komponenten [react-checkbox-list](https:\/\/github.com\/sonyan\/react-checkbox-list)<\/code> fr\u00e5n Sony An<\/a> (tillg\u00e4nglig react-checkbox-list<\/code>fr\u00e5n npm<\/a> ). Denna guide visar dig steg f\u00f6r steg hur du byter ut strukturen och metoderna f\u00f6r en klassisk React.createClass<\/code>komponent till en modern React.Component<\/code>.<\/p>\n

Fr\u00e5n och med .jsx<\/code>filen i react-checkbox-list<\/code>l\u00f6sningen kommer vi f\u00f6rst att ta bort .js<\/code>filen och byta namn p\u00e5 den till .js<\/code>eftersom .jsx<\/code>filer inte l\u00e4ngre beh\u00f6ver heta annorlunda.<\/p>\n

Det ger oss f\u00f6ljande startkod:<\/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
Konvertera komponenten<\/h2>\n
N\u00e4r vi f\u00f6rs\u00f6ker ladda den h\u00e4r koden \u00e4r det f\u00f6rsta felet vi f\u00e5rUncaught Error: Module build failed: SyntaxError: The @jsx React.DOM pragma has been deprecated as of React 0.12<\/code><\/p>\n
Of\u00e5ngat fel: Modulbygget misslyckades: SyntaxError: @jsx<\/a> React.DOM-pragman har fasats ut fr\u00e5n och med React 0.12<\/p>\n
Det \u00e4r enkelt att r\u00e4tta till detta. Ta bara bort raden \/** @jsx React.DOM *\/<\/code>fr\u00e5n toppen av dokumentet.<\/p>\n
Vi f\u00e5r nu samma fel som Uncaught TypeError: Cannot read property 'array' of undefined<\/code>i patchhandledningen<\/a> [React.createClass](https:\/\/wholesomecode.ltd\/blog\/broken-react-createclass-component-lets-fix-it\/)<\/code>.<\/a> Detta beror p\u00e5 att React.propTypes fasades ut i React version 15.50, s\u00e5 enligt den handledningen, forts\u00e4tt och installera PropTypes-paketet med kommandot via npm. Vi kommer att importera detta till v\u00e5rt paket senare.<\/p>\n
npm install --save prop-types\n<\/code><\/pre>\n
Det som f\u00f6ljer nu \u00e4r en fullst\u00e4ndig \u00f6versyn av kodbasen, s\u00e5 vi kan inte uppdatera och fixa ett fel som vi kan ha gjort tidigare, s\u00e5 vi kommer inte att veta om det har fungerat f\u00f6rr\u00e4n i slutet. Sp\u00e4nn fast!<\/p>\n
L\u00e5t oss b\u00f6rja med att ers\u00e4tta React.createClass<\/code>funktionen genom att deklarera en ny React.Component<\/code>. \u00c4ndra v\u00e5r kod s\u00e5 att den ser ut s\u00e5 h\u00e4r:<\/p>\n
'use strict';\nimport React from 'react';\n\nclass CheckBoxList extends React.Component {\n...\n}\n<\/code><\/pre>\n
Observera att vi har gjort n\u00e5gra saker h\u00e4r:<\/p>\n