React.createClassi teisendamine React.Componentiks

Oma viimases artiklis rääkisin Reacti vanemate versioonide paikamisest, et need töötaksid kaasaegses keskkonnas. Selles artiklis lähen edasi ja annan samm-sammult juhise klassikalise Reacti komponendi uuendamiseks kaasaegseks, lülitades React.createClassasjade tegemise moodsale ja eelistatud React.Componentmeetodile.

Vajalikud failid asuvad kaasasoleva GitHubi lahenduse komponentide kataloogi kaustades "Original" ja "Final".

Hankige õpetusfailid GitHubist

Taas töötan [react-checkbox-list](https://github.com/sonyan/react-checkbox-list) Sony Ani komponendiga (saadaval react-checkbox-listnpm-na ). See juhend näitab samm-sammult, kuidas asendada klassikalise React.createClasskomponendi struktuur ja meetodid kaasaegsega React.Component.

Alustades lahenduses olevast .jsxfailist, react-checkbox-listkustutame esmalt .jsfaili ja nimetame selle ümber, .jskuna .jsxfaile ei pea enam teisiti nimetama.

See annab meile järgmise alguskoodi:

'use strict';
var React = require('react');

module.exports = React.createClass({
    displayName: 'CheckBoxList',

    propTypes: {
        defaultData: React.PropTypes.array,
        onChange: React.PropTypes.func
    },

    getInitialState: function() {
        return {
            data: this.props.defaultData || []
        };
    },

    handleItemChange: function(e) {
        var selectedValues = [],
            newData = [];

        this.state.data.forEach(function(item) {
            if(item.value === e.target.value) {
                item.checked = e.target.checked;
            }
            if(item.checked) {
                selectedValues.push(item.value);
            }
            newData.push(item);
        });

        this.setState({data: newData});

        if(this.props.onChange) {
            this.props.onChange(selectedValues);
        }
    },

    reset: function() {
        var newData = [];
        this.state.data.forEach(function(item) {
            item.checked = false;
            newData.push(item);
        });

        this.setState({data: newData});
    },

    checkAll: function() {
        var newData = [];
        this.state.data.forEach(function(item) {
            item.checked = true;
            newData.push(item);
        });

        this.setState({data: newData});
    },

    render: function() {
        var options;

        options = this.state.data.map(function(item, index) {
            return (<div key={'chk-' + index} className="checkbox">
                    <label>
                        <input
                            type="checkbox"
                            value={item.value}
                            onChange={this.handleItemChange}
                            checked={item.checked? true: false} /> {item.label}
                    </label>
                </div>
            );
        }.bind(this));

        return (<div>
                {options}
            </div>
        );
    }
});

Komponendi teisendamine

Selle koodi laadimisel ilmneb esimene vigaUncaught Error: Module build failed: SyntaxError: The @jsx React.DOM pragma has been deprecated as of React 0.12

Tabamata viga: mooduli koostamine ebaõnnestus: süntaksiviga: @jsx React.DOM pragma on alates Reacti versioonist 0.12 aegunud

Selle parandamiseks on piisavalt lihtne. Eemaldage lihtsalt joon /** @jsx React.DOM */dokumendi ülaosast.

Nüüd saame vea Uncaught TypeError: Cannot read property 'array' of undefinedsamamoodi nagu lappimise [React.createClass](https://wholesomecode.ltd/blog/broken-react-createclass-component-lets-fix-it/)õpetuses. Selle põhjuseks on asjaolu, et React.propTypes oli Reacti versioonis 15.50 aegunud, nii et selle õpetuse järgi installige pakett PropTypes käsuga npm kaudu. Impordime selle hiljem oma paketti.

npm install --save prop-types

Nüüd järgneb koodibaasi täielik uuendamine, nii et me ei saa värskendada ega viga parandada, nagu oleme varem teinud, nii et me ei tea, kas see on töötanud kuni päris lõpuni. Pane kinni!

Alustame funktsiooni asendamisest React.createClassuue deklareerimisega React.Component. Muutke meie koodi nii, et see näeks välja järgmine:

'use strict';
import React from 'react';

class CheckBoxList extends React.Component {
...
}

Pange tähele, et oleme siin teinud mõned asjad:

• Eemaldatud JSX-i avakommentaar
• Muudetud deklaratsiooni tüüp selliseks var React =...on import React from 'react';kaasaegne viis deklaratsioonide tegemiseks Reactis.
• CheckBoxListFunktsiooni eksportimise asemel deklareerime nüüd uue klassi .
• Sulgudes oleva objekti süntaksi tõttu {...}peame sulgemise ära jätma);

Kuid sellel uuel klassil puudub nüüd võimalus selle eksportimiseks, et teised komponendid saaksid seda kasutada, seega lisame selle koodi lõppu ekspordideklaratsiooni.

'use strict';
import React from 'react';

class CheckBoxList extends React.Component {
...
}

export default CheckBoxList;

Meie algses koodis käsitleb seda funktsiooni esimene koodirida displayName: 'CheckBoxList',meie eksport, nii et saame selle koodi täielikult eemaldada.

Järgmine rida allapoole deklareerib, et propTypesneed istuvad nüüd väljaspool klassi ja vajavad PropTypessõltuvust, mille lisasime npm-i kaudu. Lisame selle oma importidesse ja kirjutame PropTypes järgmiselt:

'use strict';
import React from 'react';
import PropTypes from 'prop-types';

class CheckBoxList extends React.Component {
...
}

CheckBoxList.propTypes = {
    defaultData: PropTypes.array,
    onChange: PropTypes.func,
};

export default CheckBoxList;

Järgmisena deklareeritakse olek meetodi abil getInitialState, mille React.Componentlähteoleku määrame konstruktoriga. Lisage meie ehitusse järgmine kood:

...
class CheckBoxList extends React.Component {
    constructor( props) {
        super( props );
        this.state = {
            data: [],
        }
    }
...
}
...

See määrab komponendi oleku, kuid oodake, me pole talle tegelikult öelnud, kust selle olekut saada. Seal componentWillMounttuleb kasuks.

...
class CheckBoxList extends React.Component {
    constructor( props) {
        super( props );
        this.state = {
            data: [],
        }
    }

    componentWillMount() {
        this.setState({
            data: this.props.defaultData,
        });
    }
...
}
...

Oluline on märkida, et sisemised meetodid React.Componentei lõpe komadega (,), seega veenduge, et komponendile lisatud meetodid ei lõpeks komaga!

Järgmisena lisame renderdusfunktsiooni tagasi. See on ilmselt kõige lihtsam osa, peaaegu sama, selle peamise erinevusega, et muudame render: function() {lihtsalt render() {.

...
class CheckBoxList extends React.Component {
...
    render() {
        var options;

        options = this.state.data.map(function(item, index) {
            return (<div key={'chk-' + index} className="checkbox">
                    <label>
                        <input
                            type="checkbox"
                            value={item.value}
                            onChange={this.handleItemChange}
                            checked={item.checked? true: false} /> {item.label}
                    </label>
                </div>
            );
        }.bind(this));

        return (<div>
                {options}
            </div>
        );
    }
...
}
...

Et see õpetus oleks asjakohane, ei teisenda ma kahte meetodit resetja meetodi apple’i checkAllporti jaoks kasutatud mõisteid mõlemaks, nii et proovige neid ise.handleItemChange

Meetodi üleviimiseks handleItemChangepeame esmalt eemaldama sulgemiskoma (,) ja muutma funktsiooni deklaratsiooni tüüpi tüübist, handleItemChange: function(e) {et handleItemChange( e) {veenduda, et me edastame endiselt esündmuse parameetrina.

Lisame selle meie renderdusmeetodi kohale.

...
class CheckBoxList extends React.Component {
...
    handleItemChange( e) {
        var selectedValues = [],
            newData = [];

        this.state.data.forEach(function(item) {
            if(item.value == e.target.value) {
                item.checked = e.target.checked;
            }
            if(item.checked) {
                selectedValues.push(item.value);
            }
            newData.push(item);
        });

        this.setState( {data: newData} );

        if(this.props.onChange) {
            this.props.onChange(selectedValues);
        }
    }
...
}
...

Meie komponent renderdatakse nüüd, kuid see ei tööta. Kui proovite klõpsata märkeruudul, näete veateadet Uncaught TypeError: Cannot read property 'state' of undefined.

Tabamata tüübiviga: määramata atribuuti ‘state’ ei saa lugeda

Selle põhjuseks on asjaolu, et meie handleItemChangemeetod, kus me proovime olekule juurde pääseda, thison määratlemata. Selle parandamiseks peame oma funktsiooni siduma this, lisades oma konstruktorisse järgmise rea: this.handleItemChange = this.handleItemChange.bind( this );.

...
class CheckBoxList extends React.Component {
    constructor( props) {
        super( props );
        this.state = {
            data: [],
        }
        this.handleItemChange = this.handleItemChange.bind( this );
    }
...
}
...

Ja siin see on, meie äsja teisendatud Reacti komponent töös.

React.createClass kuni React.Component

Õpetuse lähtekood

Komponendi algse ja lõpliku versiooni lähtekoodi saate alla laadida GitHubist. Pistikprogramm sisaldab WordPressi Gutenbergi plokki, mida saate koodiga mängimiseks kasutada kolme failiga, mille saate vajaduse korral kustutada:

GitHubi õppefailid teisenduseks React.createClass to React.Component