U hoeft niet te vertrouwen op een pakket van derden om een meldingscomponent te maken. Hier leest u hoe u het zelf kunt bouwen.
Er zijn verschillende pakketten van derden beschikbaar in React die u kunnen helpen bij het maken van een meldingscomponent. Als u echter alleen een eenvoudige meldingscomponent wilt, wilt u misschien uw eigen component maken om te voorkomen dat u onnodige afhankelijkheden aan uw toepassing toevoegt.
Het opzetten van het project
Je zal gebruik Vite om de React-app in te stellen. Vite is een build-tool waarmee je snel een React-project kunt bouwen.
Gebruik om te beginnen de garenpakketbeheerder om een nieuw Vite-project te maken door de onderstaande opdracht uit te voeren.
garen creëren vite
De opdracht zal u vragen om een projectnaam in te voeren. Voer de naam van het project in en druk op Enter. Vervolgens wordt u gevraagd een raamwerk te selecteren. Kiezen Reageer en druk op Enter. Ten slotte wordt u gevraagd een variant te selecteren, kies javascript en druk vervolgens op Enter.
Dit zijn de configuraties die deze tutorial zal gebruiken:
Nadat Vite het project heeft gemaakt, navigeert u naar de projectmap en opent u deze met een code-editor.
Vervolgens kunt u de ontwikkelserver starten door de volgende opdracht uit te voeren.
garen ontwikkelaar
Hiermee wordt uw nieuwe React-applicatie geopend in uw standaardbrowser op http://localhost: 5173/.
Ontwerpen van de meldingscomponent
Om een flexibele meldingscomponent te maken, moet deze in staat zijn om verschillende soorten meldingen met verschillende titels, beschrijvingen en stijlen te verwerken. Het moet bijvoorbeeld een waarschuwing, succesmelding en foutmelding weergeven.
Hier zijn verschillende variaties die de meldingscomponent zou moeten kunnen weergeven.
U kunt dit bereiken door rekwisieten door te geven aan de component die het type melding specificeert dat moet worden weergegeven, de titel en de beschrijvende tekst. Door deze rekwisieten te gebruiken, kunt u het onderdeel met minimale inspanning aanpassen en hergebruiken in uw toepassing. Als je een opfriscursus over rekwisieten nodig hebt, is hier een artikel met uitleg hoe rekwisieten te gebruiken in React.
De meldingscomponent maken
In de src map, maak een nieuw bestand met de naam Melding.jsx en voeg de volgende code toe.
exporterenstandaardfunctieKennisgeving({type, titel, beschrijving}) {
opbrengst (
{/* Inhoud melding */}
</div>
)
}
Deze code maakt een functionele component genaamd Kennisgeving met drie rekwisieten: type, titel, En beschrijving. U gebruikt deze rekwisieten om de stijl en inhoud van de melding aan te passen.
Vanuit het ontwerp heeft de component een aantal pictogrammen, namelijk informatie, en een kruispictogram. Jij kan gratis te gebruiken iconen downloaden of gebruik een pictogramcomponent uit een pakket zoals reactie-iconen. Deze tutorial zal gebruiken reactie-iconen dus installeer het door de onderstaande opdracht uit te voeren.
garen reactie-iconen toevoegen
Importeer vervolgens de pictogrammen bovenaan het Kennisgeving bestanddeel.
importeren { RxCross2, RxInfoCircled } van"react-icons/rx"
Nu kunt u de component wijzigen om de pictogrammen, de titel en de prop-waarden voor de beschrijving te gebruiken om de inhoud van de melding te maken.
exporterenstandaardfunctieKennisgeving({type, titel, beschrijving}) {
opbrengst (
{titel}</div>
{beschrijving}</div>
</div>
</div>
</div>
)
}
De volgende stap is om het te stylen, afhankelijk van het ingevoerde type.
Een mogelijke benadering is om CSS-klassen te definiëren voor elk type melding dat u wilt weergeven. U kunt vervolgens voorwaardelijk de juiste klasse toepassen op basis van het type dat wordt doorgegeven.
Maak om te beginnen een nieuw bestand met de naam melding.css en importeer het in Melding.jsx door de volgende code bovenaan toe te voegen.
importeer "./notification.css"
Dan in melding.css definieer de basisstijlen voor de meldingscomponent:
.kennisgeving {
weergave: buigen;
flex-richting: rij;
uitlijnen-items: flex-start;
opvulling: 8px;
}
.melding__links {
weergave: buigen;
flex-richting: rij;
opvulling: 0px;
gat: 8px;
marge-rechts: 24px;
}
.melding__inhoud {
weergave: buigen;
flex-richting: kolom;
uitlijnen-items: flex-start;
opvulling: 0px;
}
.melding__titel {
font-familie: "Onder";
lettertype: normaal;
lettertype dikte: 500;
lettertypegrootte: 14px;
}
.melding__beschrijving {
font-familie: "Onder";
lettertype: normaal;
lettertype dikte: 400;
lettertypegrootte: 12px;
opvulling: 0;
}
U kunt vervolgens de stijlen voor de verschillende meldingstypen definiëren door de volgende code toe te voegen aan het CSS-bestand.
.melding__succes {
achtergrond: #f6fef9;
grens: 1pxstevig#2f9461;
grensradius: 8px;
}
.melding__fout {
achtergrond: #ffffa;
grens: 1pxstevig#cd3636;
grensradius: 8px;
}
.melding__waarschuwing {
achtergrond: #ffcf5;
grens: 1pxstevig#c8811a;
grensradius: 8px;
}
Met de bovenstaande code wordt de meldingscontainer opgemaakt op basis van het type dat is doorgegeven.
Gebruik de volgende stijlen om de titel aan te passen.
.melding__titel__succes {
kleur: #2f9461;
}
.melding__titel__waarschuwing {
kleur: #c8811a;
}
.melding__titel__fout {
kleur: #cd3636;
}
Gebruik deze stijlen voor de aangepaste beschrijvende tekst.
.melding__beschrijving__succes {
kleur: #53b483;
}
.melding__beschrijving__waarschuwing {
kleur: #e9a23b;
}
.melding__beschrijving__fout {
kleur: #f34141;
}
En gebruik voor de pictogrammen de volgende klassen.
.notification_icon_error {
kleur: #cd3636;
}
.notification__icon__succes {
kleur: #2f9461;
}
.melding__pictogram__waarschuwing {
kleur: #c8811a;
}
Dan, in de Kennisgeving component, kunt u voorwaardelijk de juiste klasse toepassen op basis van de type prop, zoals dit:
exporterenstandaardfunctieKennisgeving({type, titel, beschrijving}) {
opbrengst (
`melding melding__${type}`}>
`melding__links`}>
`melding__pictogram__${type}`}/>
"melding__inhoud">
`melding__titel melding__titel__${type}`}>{titel}</div>
`melding__beschrijving melding__beschrijving__${type}`}>{beschrijving}</div>
</div>
</div>
`melding__pictogram__${type}`}/>
</div>
)
}
In dit onderdeel stelt u de klasse dynamisch in, afhankelijk van het type, zoals melding__succes of melding__fout.
Om dit in actie te zien, importeert u de meldingscomponent in App.jsx en gebruik het als volgt:
importeren Kennisgeving van'./Kennisgeving'functieapp() {
opbrengst (
<>
type="succes"
titel="Taak volbracht"
beschrijving="Uw taak is met succes voltooid."
/>
</>
)
}
exporterenstandaard app
Nu kunt u een ander type doorgeven aan de Kennisgeving component en geef een passende melding weer die overeenkomt met het bericht.
Dit is essentieel voor een goede gebruikerservaring, omdat gebruikers verschillende kleuren en stijlen zijn gaan associëren met verschillende scenario's, en het is belangrijk om die associaties consistent te gebruiken. Het zou bijvoorbeeld verwarrend zijn om een gebruiker te laten weten dat hij of zij met succes een foto heeft geüpload in een rood meldingsvenster. Ze denken misschien dat de upload is mislukt, zelfs als deze is gelukt.
Interactiviteit toevoegen aan de meldingscomponent
Je hebt geleerd hoe je rekwisieten kunt gebruiken om een aanpasbare meldingscomponent te maken. Om nog verder te gaan, kunt u overgangen aan dit onderdeel toevoegen om het aantrekkelijker te maken. U kunt bijvoorbeeld CSS-animaties gebruiken om de meldingscomponent naar het scherm te schuiven en na een bepaalde tijd weer uit te schuiven.
