Nereikia pasikliauti trečiosios šalies paketu, kad sukurtumėte pranešimo komponentą. Štai kaip galite jį sukurti patys.
„React“ yra keletas trečiųjų šalių paketų, kurie gali padėti sukurti pranešimų komponentą. Tačiau, jei norite tik paprasto pranešimo komponento, galbūt norėsite sukurti savo, kad nepridėtų nereikalingų priklausomybių prie programos.
Projekto nustatymas
Tu darysi naudokite Vite, kad nustatytumėte programą „React“.. „Vite“ yra kūrimo įrankis, leidžiantis greitai sukurti „React“ projektą.
Norėdami pradėti, naudokite siūlų paketų tvarkyklę, kad sukurtumėte naują Vite projektą vykdydami toliau pateiktą komandą.
verpalai sukurti vite
Komanda paragins įvesti projekto pavadinimą. Įveskite projekto pavadinimą ir paspauskite Enter. Tada jis paragins pasirinkti sistemą. Pasirinkite reaguoti ir paspauskite Enter. Galiausiai jis paprašys pasirinkti variantą, pasirinkite JavaScript ir tada paspauskite Enter.
Šios konfigūracijos bus naudojamos šioje mokymo programoje:
Kai Vite sukurs projektą, eikite į projekto aplanką ir atidarykite jį naudodami kodo rengyklę.
Tada galite paleisti kūrimo serverį vykdydami šią komandą.
verpalai dev
Tai atidarys naują „React“ programą numatytojoje naršyklėje adresu http://localhost: 5173/.
Pranešimo komponento projektavimas
Kad būtų sukurtas lankstus pranešimų komponentas, jis turi turėti galimybę tvarkyti įvairių tipų pranešimus su skirtingais pavadinimais, aprašymais ir stiliais. Pavyzdžiui, jis turi pateikti įspėjimą, sėkmės ir klaidos pranešimą.
Čia pateikiami skirtingi pranešimo komponento variantai.
Tai galite pasiekti perduodami rekvizitus komponentui, kuris nurodo pateiktino pranešimo tipą, pavadinimą ir aprašo tekstą. Naudodami šiuos rekvizitus galite tinkinti komponentą ir pakartotinai naudoti jį visoje programoje su minimaliomis pastangomis. Jei jums reikia atnaujinimo apie rekvizitus, čia yra paaiškinamas straipsnis kaip naudoti rekvizitus React.
Pranešimo komponento kūrimas
Viduje src aplanką, sukurkite naują failą pavadinimu Notification.jsx ir pridėkite šį kodą.
eksportuotinumatytasfunkcijaPranešimas({tipas, pavadinimas, aprašymas}) {
grąžinti (
{/* Pranešimo turinys */}
</div>
)
}
Šis kodas sukuria funkcinį komponentą, vadinamą Pranešimas su trimis rekvizitais: tipo, titulą, ir apibūdinimas. Naudosite šiuos rekvizitus pranešimo stiliui ir turiniui tinkinti.
Iš dizaino komponentas turi keletą piktogramų, būtent informaciją, ir kryžminę piktogramą. Tu gali atsisiųskite nemokamų piktogramų arba naudokite piktogramos komponentą iš paketo, pvz., reakcijos piktogramos. Ši pamoka bus naudojama reakcijos piktogramos todėl įdiekite jį vykdydami toliau pateiktą komandą.
verpalai pridėti reakcijos piktogramas
Tada importuokite piktogramas viršuje Pranešimas komponentas.
importuoti { RxCross2, RxInfoCircled } iš"react-icons/rx"
Dabar galite modifikuoti komponentą, kad galėtumėte naudoti piktogramas, pavadinimą ir aprašo pasiūlymo reikšmes, kad sukurtumėte pranešimo turinį.
eksportuotinumatytasfunkcijaPranešimas({tipas, pavadinimas, aprašymas}) {
grąžinti (
{pavadinimas}</div>
{description}</div>
</div>
</div>
</div>
)
}
Kitas žingsnis – sukurti stilių, atsižvelgiant į įvestą tipą.
Vienas iš būdų, kurį galite naudoti, yra nustatyti CSS klases kiekvienam pranešimo tipui, kurį norite rodyti. Tada galite sąlygiškai pritaikyti atitinkamą klasę, atsižvelgdami į perduotą tipą.
Norėdami pradėti, sukurkite naują failą pavadinimu Pranešimas.css ir importuoti Notification.jsx viršuje pridėdami šį kodą.
importuoti „./notification.css“
Tada į Pranešimas.css apibrėžkite pagrindinius pranešimų komponento stilius:
.pranešimas {
ekranas: lankstus;
lankstumo kryptis: eilė;
išlyginti elementus: lankstus startas;
kamšalas: 8px;
}
.pranešimas__left {
ekranas: lankstus;
lankstumo kryptis: eilė;
kamšalas: 0px;
tarpas: 8px;
paraštė-dešinė: 24px;
}
.notification__content {
ekranas: lankstus;
lankstumo kryptis: stulpelyje;
išlyginti elementus: lankstus startas;
kamšalas: 0px;
}
.notification__title {
šrifto šeima: "Inter";
Šrifto stilius: normalus;
šrifto svoris: 500;
šrifto dydis: 14px;
}
.notification__description {
šrifto šeima: "Inter";
Šrifto stilius: normalus;
šrifto svoris: 400;
šrifto dydis: 12px;
kamšalas: 0;
}
Tada galite apibrėžti skirtingų pranešimų tipų stilius, pridėdami šį kodą į CSS failą.
.pranešimas__sėkmė {
fone: #f6fef9;
siena: 1pxkietas#2f9461;
pasienio spindulys: 8px;
}
.notification__error {
fone: #fffbfa;
siena: 1pxkietas#cd3636;
pasienio spindulys: 8px;
}
.notification__warning {
fone: #fffcf5;
siena: 1pxkietas#c8811a;
pasienio spindulys: 8px;
}
Anksčiau pateiktas kodas formuoja pranešimų sudėtinio rodinio stilių pagal įvestą tipą.
Norėdami tinkinti pavadinimą, naudokite šiuos stilius.
.notification__title__success {
spalva: #2f9461;
}
.notification__title__warning {
spalva: #c8811a;
}
.notification__title__error {
spalva: #cd3636;
}
Pasirinktiniam aprašo tekstui naudokite šiuos stilius.
.notification__description__success {
spalva: #53b483;
}
.notification__description__warning {
spalva: #e9a23b;
}
.notification__description__error {
spalva: #f34141;
}
Piktogramoms naudokite šias klases.
.notification_icon_error {
spalva: #cd3636;
}
.notification__icon__success {
spalva: #2f9461;
}
.notification__icon__warning {
spalva: #c8811a;
}
Tada, į Pranešimas komponentą, galite sąlygiškai taikyti atitinkamą klasę, remdamiesi tipo rekvizitas, toks:
eksportuotinumatytasfunkcijaPranešimas({tipas, pavadinimas, aprašymas}) {
grąžinti (
`pranešimas__${type}`}>
`pranešimas__left'}>
`pranešimo__piktograma__${type}`}/>
"pranešimas__turinys">
`pranešimo__pavadinimo pranešimas__pavadinimas__${type}`}>{title}</div>
`notification__description Pranešimas__aprašas__${type}`}>{description}</div>
</div>
</div>
`pranešimo__piktograma__${type}`}/>
</div>
)
}
Šiame komponente dinamiškai nustatote klasę, atsižvelgdami į tipą, pvz., pranešimas__sėkmė arba pranešimas__klaida.
Norėdami tai pamatyti, importuokite pranešimo komponentą App.jsx ir naudokite taip:
importuoti Pranešimas iš„./Pranešimas“funkcijaProgramėlė() {
grąžinti (
<>
tipas ="sėkmė"
pavadinimas =„Užduotis atlikta“
aprašymas=„Jūsų užduotis sėkmingai atlikta“.
/>
</>
)
}
eksportuotinumatytas Programėlė
Dabar galite perduoti kitą tipą Pranešimas komponentą ir pateikti atitinkamą pranešimą, atitinkantį pranešimą.
Tai būtina norint užtikrinti gerą naudotojo patirtį, nes vartotojai susiejo skirtingas spalvas ir stilius su skirtingais scenarijais, todėl svarbu šias asociacijas naudoti nuosekliai. Pavyzdžiui, būtų painu pranešti vartotojui, kad jis sėkmingai įkėlė nuotrauką raudoname pranešimų laukelyje. Jie gali manyti, kad įkėlimas nepavyko, net jei jis buvo sėkmingas.
Interaktyvumo įtraukimas į pranešimų komponentą
Sužinojote, kaip galite naudoti rekvizitus kurdami tinkinamą pranešimų komponentą. Norėdami tai padaryti dar toliau, galite pridėti šio komponento perėjimų, kad jis būtų patrauklesnis. Pavyzdžiui, galite naudoti CSS animaciją, norėdami nustumti pranešimo komponentą į ekraną ir išstumti jį praėjus tam tikram laikui.