Katso kuinka helposti voit luoda reagoivia välilehtiä

Kuva Blake Connally on Unsplash

Uusi React Context API on virallisesti poissa käytöstä ja turvallista käyttää!

Voit seurata minua viserrysillä tai tarkistaa viimeisimmät artikkelini sivustollani yaabed.com. Minulla on myös julkaisuni keskipitkällä blog.yaabed.com-sivustolla.

Tätä sovellusliittymää käytetään pääasiassa asioiden jakamiseen React-komponenttien välillä rekvisiittaporauksen ratkaisemiseksi. Rekvisiittien poraaminen on rekvisiittien jakamista vanhemmista komponenteista sovelluksen muihin lapsiosiin, varmistamalla, että kaikki tehdään tarvittaessa. Mutta miksi jakaa kaikki nämä rekvisiitta elementtien välillä, kun sitä ei välttämättä tarvita? Sieltä ContextAPI tulee.

Ihmiset ovat joskus hämmentyneitä ja alkavat käyttää ContextAPI: tä kaikkialla ilman mitään tarvetta käyttää sitä. Kuten ihmiset alkavat käyttää Reduxia ja yhdistävät sen kaikkiin projektin komponentteihin.

Älä käytä kontekstia vain välttääksesi rekvisiittien kuljettamisen muutamalla tasolla alas. Kiinnitä tapauksiin, joissa samaan tietoon on päästävä käsiksi monissa komponenteissa useilla tasoilla. - reagoi joukkue.

Jonkin aikaa reaktitiimin esittelemä uusi ContextAPI. Joten päätin toteuttaa yksinkertaisen idean käyttämällä tätä uutta lähestymistapaa oppiaksesi siitä enemmän. Aion etsiä, mitä voin suorittaa. Sitten hetken kuluttua päätin reagoida-välilehdet.

Kun aloitan reakt-välilehdet -komponentin toteuttamisen, kirjoitin jokaisen askeleen tavoitteen saavuttamiseksi ja muuntaa ne tätä artikkelia varten.

”Tietojenkäsittelytiede ei koske pelkästään tietokoneita kuin tähtitiede on kaukoputkia.” - Edsger Dijkstra

Esimerkki käytöstä toteutuksen jälkeen

Tässä on viimeinen esimerkki koodista sen jälkeen kun olen lopettanut reagointivälilehteiden toteutuksen konteksti-sovellusliittymällä.

Julkisin tämän komponentin npm: iin ja loin yksinkertaisen hiekkalaatikkoesimerkin, joka näyttää kuinka sitä käytetään:


   
      
          Tämä on välilehti 1 
      
      
          Tämä on välilehti 2 
      
   

Ota reagointivälilehdet käyttöön ilman kontekstiAPI: tä

Ehdotan, kun opit uusia asioita, on kirjoittaa koodi tietämälläsi tavalla, sitten muuntaa se uuteen tyyliin, jonka haluat oppia. Jos esimerkiksi tiedät yhdistekomponenttien käsitteen jakaa tavaroita. Luo vanhempi komponentti, nimeltään tabs-parent, joka sisältää välilehden tilan ja sisältää menetelmät välilehteiden lisäämiseksi, välilehtien poistamiseksi, aktiivinen välilehti ja edellinen aktiivinen välilehti. Jaa sitten se asioiden välillä. Näytän sinulle esimerkin reagointivälilehteiden rakentamiseksi yhdistelmäkomponenttikuvion avulla.

Taika alkaa yhdistelmäkomponenttien alla olevasta koodista. Kiitos Kent C. Doddsille hänen kurssistaan ​​edistyneistä React-komponentti malleista. Voit myös tarkistaa tämän artikkelin ”Advanced React Component Patterns”, jonka hän on kirjoittanut näistä asioista.

Kun käytät karttatoimintoa lasten ominaisuudessa, voit selata komponentin sisällä olevia elementtejä ja kloonata ne uusiksi elementeiksi ja siirtää kaiken mitä tarvitset. Tämä temppu ei myöskään selvitä näiden lastekomponenttien ulkopuolelta siirrettyjä ominaisuuksia. Se kopioi ne ja yhdistää ne komponentti-tilaan pääkääreosasta.

{React.Children.map (this.props.children, child =>
  React.cloneElement (lapsi, {
    activeTab: this.state.activeTab,
    addTab: this.addTab
  })
)}

Tässä on hiekkalaatikko koko toteutusta varten:

Nyt on aika käyttää uutta ContextAPI: tä

Uudessa kontekstiliittymäsovelluksessa, joka on paljon selkeämpi kuin ennen, ei tarvitse määritellä useita asioita vanhempien ja lasten komponenteissa rekvisiittien jakamiseksi ja tilan jakamiseksi. Tarvitset vain palveluntarjoajan jaetuille arvoille, ja kuluttajat antavat sinulle tallennetut arvot palveluntarjoajalle. Tarkista alla oleva mallikoodi, kuinka ContextAPI: n käyttö on helppoa.

const pradiarvo = {
    käyttäjä: {},
    logUserIn: () => {}
};
/ **
* Tässä määritellään konteksti api käyttämällä reagoi luoda kontekstia * tehdas, tämä tehdas sisältää kontekstin tarjoajan ja kontekstin * kuluttajan
** /
const UserContext = React.createContext (alkuperäinen arvo);
luokan sovellus laajentaa React.Component {
  logUserIn () {// lokin käyttäjän koodi}
  tehdä () {
   const konteksti = {käyttäjä: this.state.user, logUserIn: this.logUserIn};
    palata (
      {/ * Tässä on miten pääset palveluntarjoajaan. Sinun on käärittävä sovelluksesi tämän palveluntarjoajan tai korkeamman vanhemman komponentin kanssa * /}
       
           
       
    );
  }
}
toiminnon otsikko (rekvisiitta) {
  palata (
    
       {/ * Täältä miten saada kuluttajia saamaan arvoja ja tietoja palveluntarjoajakomponentista * /}                    {konteksti =>               context.user.isLoggedIn?                `tervetuloa $ {context.user.name}`:                 <-painike onClick = {context.logUserIn ()}>                   Kirjaudu sisään                             }                 ); }

Ota React-välilehdet käyttöön ContextAPI: n avulla

Se on sama kuin yhdistelmäkomponenttikuvio, yksi vanhemmista on vastuussa asioiden jakamisesta komponenttien välillä. On ContextAPI soitti palveluntarjoajalle. Kaikki palveluntarjoajan sisällä olevat lapset voivat käyttää kuluttajaa tilansa tallentamiseen palveluntarjoajan sisällä. Se on sama kuin yhdistelmäkomponentit, jotka käyttävät kloonilapsia tarvittavalla tiedolla. Voit tarkistaa alla olevan näytekoodin ja vertailla näitä kahta mallia.

Välilehdet kontekstikomponentti

Tämä konteksti sisältää jaetun tilan Tab-komponentin ja Tabs-komponentin välillä.

  • Välilehdet: Arkki välilehtiä, jotta tallennetut lisätyt välilehdet saadaan näkyviin niiden yläosassa, jotta käyttäjä voi napsauttaa yhtä niistä ja muuttaa tilan itse.
  • Aktiivinen välilehti: Objekti, johon tallennetaan, mikä välilehti näkyy käyttäjälle tämä on vaadittava kokonaisuus reakt-välilehdet-komponenttiin, joka sisältää aktiivisen välilehden tunnuksen.
  • Lisää välilehti: Toiminto antaa välilehti-alakomponentin kyvyn lisätä itsensä asennettuna.
  • On Click: Toiminto, jolla voidaan muuttaa aktiivista välilehteä, kun uutta välilehteä napsautettiin.

Välilehtirasian komponentti

Alla oleva koodi näyttää välilehden säilytyskomponentin, ja se vain osoittaa, milloin sen id on aktiivinen.

Kaikki välilehdet

Jos ihmettelet, miksi käytän lumoavaa, mielestäni CSS-JS-lähestymistavan käyttäminen React-komponenttien muotoilussa on huomattava asia, koska sinulla on ohjain mihin tahansa ja kapseloit elementin itse. Suosittelen käyttämään glamouria tässä, koska se on joustava liian monissa tapauksissa.

johtopäätös

Siellä on liian monta mallia. Muista kuitenkin valita, mikä tila sopii sinun tapaukseesi. Uudelleenkäytettävien komponenttien luominen oikealla tavalla on yksi avaintekijöistä olla etualan insinööri. Joten älä pidä kiinni ja aloita elementtien koodaaminen uusilla kuvioilla ja valitse oikea. Älä myöskään pidä yhtä tilaa ja jätä muille hyviä asioita.

Kirjoitan osoitteessa blog.yaabed.com. Jos pidit tästä artikkelista, muista jakaa se muiden ihmisten kanssa. Ja älä unohda painaa Seuraa-painiketta saadaksesi lisää tämänkaltaisia ​​artikkeleita, seuraa myös minua twiitissä.

Hei, nimeni on Yazan Aabed. Kasvanut Palestiinassa. Pääaineeni oli tietotekniikassa. Olen Frontend Engineer ja JavaScripti-rakastaja . Enimmäkseen työskentelee Frontend-kehysten kanssa, kuten (AngularJs, ReactJS). Voit soittaa minulle #Geek . Haluan myös jakaa tietoni muille ihmisille ja oppia heiltä 🌪. Löydät minut GitHubista, Mediumista, Twitteristä.