SHVATITE KORIŠTENJE PORTALA I GRANICE POGREŠAKA U REACT -U

Shvatite korištenje Portala i granice pogrešaka u React -u

U ovom ćemo članku naučiti o React portalu i granici pogrešaka te kako se mogu koristiti u React -u.

Portal

React portal je način povezivanja elementa izvan njegove hijerarhije komponenti, u zasebnu komponentu. Naziv Portal predstavlja da se element može postaviti bilo gdje u stablu DOM -a izvan normalnog stabla komponenti React. Koncept Portala dodan je nakon verzije 16.0 u React -u.

postoje li pokazivači u pythonu

React pruža API za stvaranje portala pod imenom ReactDOM.createPortal () koji prihvaća 2 parametra, prvi parametar je element koji se mora iscrtati, a drugi element je DOM element u kojem se mora prikazati. Portali se uglavnom koriste za implementaciju, Tooltip, Modals, globalne obavijesti o porukama, hovercards, widgete za chat i plutajuće izbornike. Za Portal možemo vratiti nizove, brojeve, komponente, React portale ili niz djece.

Mjehurići događaja putem React portala

Kako React portal može biti bilo gdje izvan DOM stabla, ali će se ponašati kao React dijete na sve druge načine, unatoč činjenici da je dijete portal, i dalje će postojati na React stablu bez obzira na njegov položaj u DOM stablu. Dakle, ako želimo pokrenuti bilo koji događaj s Portala, on će se proširiti na pretke u stablu koje sadrži, čak i ako ti elementi nisu preci stabla DOM.

Pogledajmo demo koji će prikazati opis alata pomoću Portala.

import React, { Component } from 'react' class Tooltip extends Component { constructor(props) { super(props) this.state = { hover: false } } handleMouseIn() { this.setState({ hover: true }) } handleMouseOut() { this.setState({ hover: false }) } render() { const tooltipStyle = { display: this.state.hover ? 'block' : 'none' } return ( on hover here we will show the tooltip this is the tooltip!! ); } } export default Tooltip

Sada upotrijebite komponentu Opis u komponenti aplikacije.

import React from 'react'; import logo from './logo.svg'; import './App.css'; import Tooltip from './components/Tooltip' function App() { return (  Hello World ! ); } export default App;

Izlaz će biti prikazan na dolje.

Ovo je naslov slike

Dakle, na ovaj način također možemo prilagoditi komponentu za dodatne funkcionalnosti poput stvaranja modela, opisa alata itd.

Granica pogreške

U React -u postoji koncept granice pogreške koji sprječava greške koje se bacaju korisniku. Dakle, ako dođe do bilo kakve pogreške, ovo će prikazati prikaz prilagođen korisniku. Ova komponenta granice pogreške je komponenta koja hvata JavaScript pogreške iz njihovih stabala podređenih komponenti, bilježi te pogreške i prikazuje rezervno korisničko sučelje umjesto grešaka srušenih stabla komponente koje je izbacila aplikacija. Granice pogrešaka hvataju pogreške tijekom iscrtavanja, u metodama životnog ciklusa i u konstruktoru unutar cijelih stabala. Granice pogreške stvaraju se kao granica klase kada je definirana jedna ili obje ove metode - statički getDerievedStateFromError () ili componentDidCatch ().

Gore navedene 2 metode pogreške koriste se za hvatanje korisničkog sučelja pogreške i podataka o pogrešci u dnevniku.

static getDerievedStateFromError ()

Ova metoda se poziva nakon što greška izbaci komponentu djeteta. Dobiva pogrešku koju je podređena komponenta izbacila kao parametar i trebala bi vratiti vrijednost u stanje ažuriranja.

Kod u nastavku osnovna je sintaksa za korištenje granice pogreške.

import React,{Component} from 'react'; class ErrorBoundary extends Component{ constructor(props) { super(props) this.state = { hasError : false } } static getDerivedStateFromError(error){ return {hasError:true}; } render(){ if(this.state.hasError){ return Error Occurred
 } return this.props.children; } } export default ErrorBoundary

Kako se metoda getDerievedFromState () poziva tijekom faze renderiranja samo radi postavljanja stanja u React, tako da ne uključuje nikakve nuspojave. Dakle, za to moramo koristiti metodu componentDidCatch ().

componentDidCatch ()

Ova se metoda koristi za bilježenje informacija o pogrešci bačenih tijekom metode getDerievedFromState ().

Sintaksa - componentDidCatch (pogreška, informacije)

import React,{Component} from 'react'; class ErrorBoundary extends Component{ constructor(props) { super(props) this.state = { hasError : false } } static getDerivedStateFromError(error){ return {hasError:true}; } componentDidCatch(error,info){ // Any reporting Service of custom code to set state } render(){ if(this.state.hasError){ return Error Occurred
 } return this.props.children; } } export default ErrorBoundary

Životni ciklus se poziva kada se greška izbaci iz podređene komponente. Potrebna su 2 parametra.

pogreška - Pogreška koja je nastala

Info - Objekt s ključem ComponentStack koji sadrži informacije o tome koja je komponenta izazvala pogrešku.

componentDidCatch () se poziva tijekom faze predaje, pa su nuspojave dopuštene i koriste se za prijavljivanje pogrešaka.

Neke važne točke koje treba imati na umu tijekom korištenja granice pogreške,

Granice pogrešaka ne hvataju pogreške u sljedećim slučajevima,
Bačena greškom sama granica.
Voditelji događaja
za Async kod
Renderiranje na strani poslužitelja
Granice pogrešaka mogu biti samo komponente klase
Granice pogrešaka funkcioniraju kao javascript | _+_ | blok, ali samo za komponentu.

Pogledajmo demo za Error Boundary.

ErrorBoundary.js

gdje kupiti wabi

catch {}

Samo promijenite naziv metode za generiranje pogreške u Tooltip.js

import React,{Component} from 'react'; class ErrorBoundary extends Component{ constructor(props) { super(props) this.state = { hasError : false } } static getDerivedStateFromError(error){ return {hasError:true}; } componentDidCatch(error,info){ this.setState({ hasError:true }) } render(){ if(this.state.hasError){ return Error Occured
 } return this.props.children; } } export default ErrorBoundary

Sada u datoteci App.js

import React, { Component } from 'react' class Tooltip extends Component { constructor(props) { super(props) this.state = { hover: false } } handleMouseIn() { this.setState({ hover: true }) } handleMouseOut() { this.setState({ hover: false }) } render() { const tooltipStyle = { display: this.state.hover ? 'block' : 'none' } return ( on hover here we will show the tooltip this is the tooltip!! ); } } export default Tooltip

Izlaz će biti prikazan na sljedeći način,

Ovo je naslov slike

Ovdje ćete primijetiti promjenu. Nakon prikaza gornjeg zaslona, samo nakon nekoliko sekundi, stranica s pogreškom ponovno se prikazuje kao dolje,

Ovo je naslov slike

To je zato što u fazi razvoja granice pogrešaka ne poništavaju preklapanje pogrešaka. Što se možda neće dogoditi u fazi proizvodnje. Da biste riješili ovaj problem, možete dodati donji kod u svoju CSS datoteku.

import React from 'react'; import logo from './logo.svg'; import './App.css'; import Tooltip from './components/Tooltip' import ErrorBoundary from './components/ErrorBoundary' function App() { return (  Hello World ! ); } export default App;

Tada će tekst ili slika koju želite prikazati pomoću granice pogreške ostati na zaslonu preglednika.

Sažetak

U ovom smo članku saznali o portalima i granicama pogrešaka u React -u.

Hvala na čitanju !

#react #portals #error #tutorial

Shvatite korištenje Portala i granice pogrešaka u React -u