Rakstam kodu React – viena skata nosacījuma atjauninājumi – ziņojums katrai dienai

[+VIDEO]

Ar šī raksta praktiskā darba palīdzību varēsiet izprast dažādas pieejas nosacījuma renderēšanai un reaģēšanai. Un jūs varēsiet izmantot if-else priekšrakstus un trīskāršus operatorus, lai nosacīti renderētu komponentus.

Es izmantoju komandu npx create-react-app, lai izveidotu jaunu noklusējuma React aplikāciju, kurā rakstīt savu kodu.

Manas lietotnes mērķis ir izmantot vietējo datora laiku un, pamatojoties uz atgriešanas vērtībām, izvadīt dažādus ziņojumus vienā un tajā pašā atgriešanas paziņojumā. Viss ietīts vienā DIV elementā. Konkrēti, es vēlos izveidot nelielu lietotni, kas parāda pielāgotu ziņojumu katrai konkrētai darba dienai. Un, ja ir rīta laiks, pajautājiet lietotājam, vai viņš jau ir paēdis brokastis.

Es sāku lietotnes komponenta kodu, deklarējot laika mainīgo un piešķirot tam datuma konstruktora izsaukumu.

Pēc tam es iestatīju dienas mainīgo. Un es izmantoju iebūvēto lokalizācijas virknes funkciju, kas pastāv datuma objektā, lai norādītu lokalizāciju kā latviešu LV, lai dienas nosaukumus būtu iespējams uzrādīt latviešu valodā, pretējā gadījumā aplikācija nesapratīs konsolē izvadītos angliskos dienas nosaukumus un nevarēs tos pielāgot latviskai izvadei.

Es norādīju arī nedēļas dienas vērtību, kas parāda dienas kā pilnus vārdus, piemēram, pirmdiena, otrdiena, trešdiena utt. Pēc tam es deklarēju rīta mainīgo, kas saglabā Būlean vērtību, pamatojoties uz to, vai pašreizējais laiks ir lielāks vai vienāds ar 6 un mazāks vai vienāds ar 12. Visbeidzot, es deklarēju dienas ziņojuma mainīgo, bet es nepiešķiru tam nekādu vērtību. tas vēl. Lai ģenerētu dinamisku ziņojumu.

Aplikācijas koda sākuma daļa vizualizācijai:

function App() {
  const time = new Date();
  console.log(time);
  const day = time.toLocaleString("lv-LV", { weekday: "long" });
  console.log(day);
  const morning = time.getHours() >= 6 && time.getHours() <= 12;
  let dayMessage;
...

Es izmantoju if -else paziņojumu, kas tiek nodots dienas mainīgajā vērtībā. Es arī visas rakstzīmes dienas mainīgajā virknē veidoju ar mazajiem burtiem, izmantojot iebūvēto funkciju uz mazajiem burtiem.

day.toLocaleLowerCase()

Pamatojoties uz dienas mainīgajā saglabāto vērtību. Pēc tam dienas ziņojuma mainīgajam piešķiru noteiktu virkni. Piemēram, ja tā ir pirmdiena. Dienas ziņojuma mainīgais saglabā virkni, kas ir “Priecīgu pirmdienu”. Ja tā ir otrdiena, virkne nolasa otrdienu, un izvada pielāgoto vērtību ” četras dienas līdz brīvdienām “.

if (day.toLocaleLowerCase() === "pirmdiena") {
    dayMessage = `Priecīgu ${day}`;
  } else if (day.toLowerCase() === "otrdiena") {
    dayMessage = `${day} četras dienas līdz brīvdienām`;...

Kad esmu apskatījis visas iespējas no pirmdienas līdz piektdienai, es pievienoju else paziņojumu ar virknes vērtību visām pārējām iespējām – String ar tekstuālu vērtību “nesatraucies, visa jautrība vēl priekšā”

Tādējādi es nonāku pie atgriešanās paziņojuma. Atgriešanās paziņojumā man ir viens virsraksts H1, un tā iekšpusē es piekļūstu virknes vērtībai, kas saglabāta dienas ziņojuma mainīgajā. Turklāt es izmantoju trīskāršu operatoru, lai nosacīti novērtētu rīta mainīgo. Ja būlean vērtība ir true, es izvadu virkni, kura uzdod jautājumu “vai esat jau paēdis brokastis?” Šī virkne ir ievietota H2 elementā.

Ja būlean vērtība būs false, tiks parādīta tukša virkne.

Ja vēlaties šo kodu izmēģināt un palaist savu aplikāciju, tad šeit būs pilnais App.js kods Jūsu izmēģinājumiem un pielāgošanai:

function App() {
  const time = new Date();
  console.log(time);
  const day = time.toLocaleString("lv-LV", { weekday: "long" });
  console.log(day);
  const morning = time.getHours() >= 6 && time.getHours() <= 12;
  let dayMessage;


  if (day.toLocaleLowerCase() === "pirmdiena") {
    dayMessage = `Priecīgu ${day}`;
  } else if (day.toLowerCase() === "otrdiena") {
    dayMessage = `${day} četras dienas līdz brīvdienām`;
  } else if (day.toLowerCase() === "trešdiena") {
    dayMessage = `${day} puse nedēļas jau pieveikta`;
  } else if (day.toLowerCase() === "ceturtdiena") {
  dayMessage = `${day} sāc plānot savas brīvdienas`;
  } else if (day.toLowerCase() === "piektdiena") {
    dayMessage = `ohooo nedēļas nogale drīz klāt!`;
  } else {
    dayMessage = "nesatraucies, visa jautrība vēl priekšā";
  }
  return (
    <div className="App">
      <h1>
        {dayMessage}
      </h1>
      {morning ? <h2>Vai Tu jau paēdi brokastis?</h2> : ''}
    </div>
  );
}


export default App;

.App {
  background: linear-gradient(to right, #12c2e9, #c471ed, #f64f59);
  height: 100vh;
}


h1 {
  font-size: 3rem;
  color: white;
  text-shadow: 2px 2px rgba(0,0,0,.5);
}


h2 {
  font-size: 1.5rem;
  color: white;
}


.App,
h1,
h2 {
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    background-color: rgba(255,255,255,.15);
    backdrop-filter: blur(5px);
    border-radius:10px;
    padding:20px;
}