Siiani oleme selles õpetuseseerias kirjutanud kogu koodi funktsiooni sisse registerBlockType(). editSee on täiesti võimalik ja sageli soovitatakse selle asemel määrata redigeerimine eraldi komponendile. Seda tehes saame kasutada selliseid funktsioone nagu komponendi oleku ja elutsükli meetodid. See on ka palju puhtam, loetavam ja pakub korduvkasutatavat koodi!
Kui te ei ole kursis Reacti komponentide loomisega või oleku- ja elutsüklimeetoditega, soovitan esmalt lugeda Reacti selleteemalist ametlikku juhendit .
Klassi komponendi määratlemine jaoksedit
Saate defineerida komponendi kas funktsiooni või klassina. Klassikomponendiga saate kasutada selliseid funktsioone nagu oleku- ja elutsükli meetodid. Uuemates Reacti versioonides (16+) saate aga kasutada Reacti konkse, et simuleerida funktsioonikomponentide oleku- ja elutsükli meetodeid. Kuid selles õpetuses keskendume klassikomponendi loomisele. See, mida oleme selles seerias siiani loonud, "inline" registerBlockType()jaoks editja save, on funktsioonikomponendid.
Klassi komponendi määratlemiseks laiendame WordPressi Component( wp.elementpaketis), täpselt nii, nagu laiendaksite klassi komponenti React.Component.
Pidage meeles, et teie klassi komponent peab sisaldama funktsiooni render(). Ja Javascripti toimimise tõttu tuleb teie klass määratleda enne teie registerBlockType()kõnet (kirjutage oma klassi komponent kõigepealt faili ja hoidke alles registerBlockType()pärast seda. Hiljem selles postituses õpime, kuidas komponente eraldi failidesse eraldada, eksportida ja kaasata neid).
Ühesõnaga nii:
Rekvisiidid editrakendusest rakendatakse automaatselt meie komponendile. Ärge unustage, et klassi komponendile peate viitama rekvisiitidele this.props. WordPress Gutenbergi tuumas on tavaline editfunktsioonide jaoks eraldi komponentide kasutamine, kuna need sisaldavad enamasti palju rohkem koodi. Funktsiooni savevõib sageli sisse jätta, registerBlockType()kui see ei sisalda ka palju koodi.
Seda tehes saate nüüd oma komponendi kirjutada täpselt nagu Reacti puhul. Saate lisada funktsioone, konstruktorit, olekut ja elutsükli meetodeid.
See on kood, mille saime viimases etapis, teisendatuna klassikomponendiks:
Kui destruktureerisite attributesja setAttributesrekvisiitidest nagu meie tegime, on eraldi klassikomponendile üleminekul vaja muuta vaid ühte rida; #9alates propskuni this.props. Kogu kood töötab nagu varem, ilma midagi muud parandamata. See on hävitamise ilu. Kui te seda ei hävitanud ja viitasite nt props.attributesotse, peaksite lisama this.kõigi üksikute viidete ette attributesja setAttributeskõikjale.
Hakkame tegema asju, mida nüüd klassikomponendiga teha saame!
Funktsioonide määratlemine jathis
Tõsi, jah, saate funktsioone defineerida funktsioonikomponendi sees edit, enne kui helistate return. Kuid isiklikult olen alati eelistanud funktsionaalsust loogika järgi eraldada. Minu arvates on parem eraldada funktsioonid loogika ja muude eesmärkide jaoks väljaspool funktsiooni, mis vastutab väljundi renderdamise eest. Mõned inimesed eelistavad ka sündmustes funktsioone kutsuda, selle asemel, et teha neid sees, nagu oleme seni teinud (setAttributes()näiteks onChange).
Praeguse seisuga on meie koodil kaks asja, mis võivad olla kasulikud funktsioonidele üleminekul; InspectorControlsja BlockControls. See lühendab returnoluliselt meie koodi ja muudab meie koodi hõlpsamini loetavaks.
Defineerime kaks funktsiooni, mis tagastavad kogu InspectorControlsploki ja terve BlockControlsploki. Noolefunktsioone (functionName =() => { ... }) kasutades on meil täielik juurdepääs thisrekvisiitide hankimiseks. Kui te ei teinud 1. sammu viimast osa – Babeli seadistamine uusimate süntaksitega, kuvatakse kompileerimisvead. Peaksite looma thisiga funktsiooni jaoks konstruktori ja sidumise. Lisateavet käsitlemise kohta saate lugeda Reacti KKK lehethis algusest .
Samuti pidage meeles, et kuna me oleme nüüd klassis, peate kutsuma kõik selle funktsioonid this.ette.
Pange tähele, et olen välja jätnud koodi tegeliku sisu InspectorControlsja BlockControlset kood oleks lühem. Midagi nende koodis ei pea muutma.
Kasutame ka seda, et returnavaldus võib tagastada ka massiivi. Kõik massiivis olev renderdatakse nagu tavaliselt nende asukohas. See muudab funktsioonide otse väljakutsumise lihtsaks return.
Ilmselgelt saate määratleda ka elutsükli meetodeid, näiteks componentDidMount(). Gutenbergi komponentides pole nende tegemisel mingit vahet kui Reactis.
Konstruktor ja kasutusolek
Proovime olekut oma komponendis rakendada. Pidage meeles, et olek on meie klassikomponendis vaid ajutiselt salvestatud ja seda ei salvestata kuhugi – näiteks atribuutidesse. See on lihtsalt selleks, et hoida oma komponendi oleku üle kontrolli. Oleku tavalised kasutusviisid on oleku kasutamine olekulipuna, oodates asünkroonilise kõne naasmist, millegi skoori ajutine hoidmine enne selle atribuuti salvestamist või ploki „eelvaate/redigeerimisrežiim" rakendamine.
Te viitate olekule ja värskendamise olekule täpselt nagu Reactis; koos this.stateja setState(). Tavaliselt initsialiseerite oleku konstruktoris. Ja mis puutub konstruktori määratlemisse – see on täpselt nagu Reactis –, ärge unustage sooritada propsja teha super(props)samuti. Lühidalt:
class FirstBlockEdit extends Component {
constructor(props) {
super(props);
this.state = {
example: 1
}
}
render() {
this.setState({ example: 2 });
console.log(this.state.example);
...Blokeerimisrežiimi muutmise/eelvaate lüliti
Kasutame tööriistaribade eelmises etapis õpitut, et luua oma ploki jaoks režiimilüliti. Rakendame tööriistariba nupuga, mis lülitab olekut eelvaate- ja redigeerimisrežiimi vahel. Redigeerimisrežiimis saab plokk tavapäraselt kaks RichTexti komponenti. Kuid eelvaaterežiimile lülitamisel keelasime redigeerimise ja renderdasime ploki väljundi.
Kõigepealt loome konstruktori ja seadistame oleku ühe tõeväärtusega; editModemis algab kui true. See super(props)on vajalik klassipõhises Reacti komponendis konstruktori määratlemisel.
class FirstBlockEdit extends Component {
constructor(props) {
super(props);
this.state = {
editMode: true
}
}
...Tööriistaribade väljastamise funktsioonis muudame varem loodud kohandatud nuppu (mis ainult console.logsellel klõpsamisel midagi). Selle onClickrekvisiidil kutsume setState()välja ja eitame praeguse editModetõeväärtuse. Et kasutajal oleks lihtsam aru saada, vahetame ka nupu ikooni ja sildi vahel. Näiteks kui eelvaaterežiim on aktiivne, kuvatakse nupul silt "Muuda" ja pliiatsiikoon, mis on tavaliselt redigeerimiseks aktsepteeritav.
Ja lõpuks saame oma ploki peamise renderdusmeetodi raames teha, mida tahame. See osa on tõesti teie otsustada – teete sama, mida tegime ülaloleval nupul oleva sildi ja ikooniga. Lisame kaks väljundplokki, ühe kui this.state.editModeon true(mis peaks olema tavalised redigeeritavad RichTextkomponendid) ja teise, kui see on false.
Näiteks kasutan kahte WordPressi komponenti wp.components; Placeholderja Disabledeelvaaterežiimi jaoks. Komponent Placeholderasetab teie ploki kenasse halli kasti, mis teeb tõesti selgeks, et seda ei saa redigeerida. Pidage meeles, et see on lisatud stiiliga, nii et kui soovite täiuslikku eelvaadet, ei pruugi see teile sobida. Ja ma Disabledpaken kõik komponendi sisse, mis muudab kõik sees olevaks muutmatuks, klõpsamatuks ja lohistamatuks. See on meie uus render()funktsioon meie komponendis:
Kasutan ka komponenti Fragment( wp.elementpaketti), mis on sama mis React.Fragment. Kui te pole sellega tuttav, mähime väljundi selle sisse, kui me ei soovi lisada täiendavaid tarbetuid HTML-i ümbriseid. Reactis peab kõigel olema juursõlm. Kui redigeerimisrežiim on aktiivne (rida #13), väljastame kaks RichTextkomponenti kohe üksteise järel, seega vajame nende ümber juursõlme.
Kui eelvaaterežiim on aktiivne (rida #29), väljastame kahe RichTextkomponendi väärtused. Nagu me save, kasutame RichText.Contentväikese redaktori asemel nende väärtuste tagastamiseks.
Komponent Placeholderon saadaval painduva stiiliga ja vaikimisi painduva suuna reaga. Rekvisiidis trueesitamine isColumnLayoutmuudab selle painduva suuna veeruks (nii et kõik virnastab). Kuid nagu varem mainitud – võiksite selle komponendi vahele jätta ja pigem genereerida eelvaade täpselt nii, nagu see oleks kasutajaliideses.
Ja sellega on meil blokeerimisrežiimi eelvaate/redigeerimise lüliti. Ilmselgelt saate "redigeerimisrežiimi" sisu reguleerida, et näidata nt juhtsisendeid või muud.
Saate luua nii palju komponente, kui soovite, kuid te ei piirdu ainult ühe editfunktsiooniga! Looge lihtsalt rohkem komponente ja lisage need returnavaldusse. See on tegelikult Reacti idee – kapseldatud kooditükkide loomine, millest igaüks käsitleb oma olekut ja ühendab need keerukate kasutajaliideste saamiseks.