Muunnetaan React.createClass React.Componentiksi

Viimeisin päivitys marras 9, 2022

Sisältö

Edellisessä artikkelissani puhuin Reactin vanhempien versioiden korjaamisesta toimimaan nykyaikaisessa ympäristössä. Tässä artikkelissa menen pidemmälle ja annan vaiheittaisen oppaan klassisen React-komponentin päivittämiseen nykyaikaiseksi vaihtamalla React.createClassasioiden tekeminen nykyaikaiseen ja suositumpaan React.Componentmenetelmään.

Tarvitsemamme tiedostot ovat mukana tulevan GitHub-ratkaisun komponenttihakemiston ‘Original’ ja ‘Final’ kansioissa.

Hanki opetusohjelmatiedostot GitHubista

Taas työskennellään [react-checkbox-list](https://github.com/sonyan/react-checkbox-list) Sony Anin komponentin kanssa (saatavana react-checkbox-listnpm ). React.createClassTämä opas näyttää vaihe vaiheelta, kuinka klassisen komponentin rakenne ja menetelmät korvataan modernilla React.Component.

Alkaen ratkaisussa olevasta .jsxtiedostosta react-checkbox-list, poistamme ensin .jstiedoston ja nimeämme sen uudelleen muotoon, .jskoska .jsxtiedostoja ei enää tarvitse nimetä eri tavalla.

Tämä antaa meille seuraavan aloituskoodin:

Komponentin muuntaminen

Kun yrität ladata tätä koodia, ensimmäinen virhe, jonka saamme, onUncaught Error: Module build failed: SyntaxError: The @jsx React.DOM pragma has been deprecated as of React 0.12

Tavoittamaton virhe: Moduulin rakennus epäonnistui: SyntaxError: @jsx React.DOM- käytäntö on vanhentunut React 0.12 :sta lähtien

Tämä on tarpeeksi yksinkertainen korjata. Poista vain viiva /** @jsx React.DOM */asiakirjan yläosasta.

Saamme nyt saman virheenUncaught TypeError: Cannot read property 'array' of undefined kuin korjausohjeessa. Tämä johtuu siitä, että React.propTypes on vanhentunut Reactin versiossa 15.50, joten jatka tämän opetusohjelman mukaisesti ja asenna PropTypes-paketti komennolla npm:n kautta. Tuomme tämän pakettiin myöhemmin.[React.createClass](https://wholesomecode.ltd/blog/broken-react-createclass-component-lets-fix-it/)


npm install --save prop-types

Nyt seuraa koodikannan täydellinen uudistus, joten emme voi päivittää ja korjata virhettä, kuten olemme saaneet tehdä aiemmin, joten emme tiedä, onko se toiminut aivan loppuun asti. Kiinni!

Aloitetaan korvaamalla React.createClassfunktio ilmoittamalla uusi React.Component. Muuta koodiamme niin, että se näyttää tältä:


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

class CheckBoxList extends React.Component {
...
}

Huomaa, että olemme tehneet muutamia asioita täällä:

Poistettu avaava JSX-kommentti
Ilmoitustyyppi muutettu var React =...tähän import React from 'react';on moderni tapa tehdä ilmoituksia Reactissa.
Ilmoitamme nyt uuden luokan CheckBoxListfunktion viemisen sijaan.
Suluissa olevan objektin syntaksin vuoksi {...}meidän on hylättävä sulkemis);

Tästä uudesta luokasta puuttuu kuitenkin nyt tapa viedä sitä, jotta muut komponentit voivat käyttää sitä, joten lisätään vienti-ilmoitus koodin alaosaan.


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

class CheckBoxList extends React.Component {
...
}

export default CheckBoxList;

Alkuperäisessä koodissamme funktion ensimmäinen koodirivi oli, displayName: 'CheckBoxList',että vientimme käsittelee nyt tämän, joten voimme poistaa koodin kokonaan.

Seuraava rivi alas ilmoittaa, että propTypesnämä istuvat nyt luokan ulkopuolella ja tarvitsevat PropTypesriippuvuuden, jonka lisäsimme npm:n kautta. Lisätään se tuontiin ja kirjoitetaan PropTypes näin:


'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;

Seuraavaksi tila ilmoitetaan menetelmällä getInitialState, jossa React.Componentasetamme alkutilan konstruktorilla. Lisää seuraava koodi rakentamiseen:


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

Siinä mennään, se määrittää komponentin tilan, mutta odota, emme ole kertoneet sille, mistä sen tila saa. Siellä se componentWillMounton hyödyllistä.


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

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

Tärkeintä on huomata, että sisäiset menetelmät React.Componenteivät pääty pilkkuihin (,), joten varmista, että komponenttiin lisäämäsi menetelmät eivät pääty pilkkuun!

Lisätään seuraavaksi renderöintitoiminto takaisin. Tämä on luultavasti helpoin osa, se on melkein sama, sillä keskeinen ero, että muutamme render: function() {vain render() {.

Jotta tämä opetusohjelma pysyy asian ytimessä, en muunna kahta menetelmää resetja menetelmäomenan checkAllportissa käytettyjä käsitteitä handleItemChangemolemmiksi, joten voit vapaasti kokeilla niitä itse.

Menetelmän siirtämiseksi handleItemChangemeidän on ensin poistettava sulkeva pilkku (,) ja muutettava funktion ilmoitustyyppi -asennosta handleItemChange: function(e) {varmistaaksemme handleItemChange( e) {, että käytämme edelleen etapahtumaparametria.

Lisätään se renderointimenetelmämme yläpuolelle.


...
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);
        }
    }
...
}
...

Komponenttimme hahmonnetaan nyt, mutta se ei toimi. Kun yrität napsauttaa valintaruutua, saat virheilmoituksen Uncaught TypeError: Cannot read property 'state' of undefined.

Uncaught TypeError: Määrittämättömän ominaisuuden ‘state’ lukeminen epäonnistui

Tämä johtuu siitä, että handleItemChangemenetelmässämme, jossa yritämme päästä tilaan, thison määrittelemätön. Korjataksemme tämän meidän täytyy sitoa funktiomme thislisäämällä seuraava rivi konstruktoriimme: 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 siellä se on, juuri muunnettu React-komponenttimme toiminnassa.

React.createClass to React.Component

Opetusohjelman lähdekoodi

Voit ladata komponentin alkuperäisen ja lopullisen version lähdekoodin GitHubista. Laajennus sisältää WordPress Gutenberg -lohkon, jonka avulla voit leikkiä koodilla kolmella tiedostolla, jotka voit poistaa tarpeen mukaan:

GitHub-opetustiedostot React.createClass to React.Component -muunnokselle

: wholesomecode.ltd