Luodaan monipuolinen Notification-komponentti, joka näyttää tekstin ja muuttaa dynaamisesti background-color-ominaisuutta behavior-propin perusteella. Toteutus etenee vaiheittain.

Vaihe 1

Aloitetaan luomalla vanhempi komponentti, App, sekä lapsikomponentti, Notification, käyttäen Reactin perusrakennetta.

// Import necessary dependencies and create a root element
import { createRoot } from "react-dom/client";

const root = createRoot(document.getElementById("root"));

// Child component - `Notification`
const Notification = (props) => <></>;

// Parent component - `App`
const App = () => <></>;

// Render the `App` component to the root element
root.render(<App />);

Vaihe 2

Tarjotaksemme oletustyylit Notification-komponentille, luomme olion nimeltä notificationStyles ja määritämme sille seuraavat ominaisuudet: padding arvolla "20px"; fontSize arvolla "24px"; color arvolla "aquamarine";

// Define default styles as an object
const notificationStyles = {
  padding: "20px",
  fontSize: "24px",
  color: "aquamarine",
};

Asetetaan notificationStyles-olio arvoksi style-komponentin Notification component-attribuutille, joka kohdistetaan palautettavaan p-elementtiin.

// Child component - Notification
const Notification = (props) => (
  <>
    {/* Step 2: Apply default styles using inline styles */}
    <p style={notificationStyles}></p>
  </>
);

Vaihe 3

App-komponentissa voidaan hyödyntää Notification-komponenttia välittämällä sille behavior-prop ja text-prop. behavior-prop määrittää ilmoituksen ulkoasun, kun taas text-prop määrittää ilmoituksessa näytettävän tekstin.

// Parent component - `App`
const App = () => (
  <>
    {/* Step 3: Use the Notification component with behavior and text props */}
    <Notification text="Success" behavior="positive" />
    <Notification text="Failure" behavior="negative" />
    <Notification text="Information" behavior="neutral" />
  </>
);

Vaihe 4

Voimme toteuttaa logiikan, jolla jokaisen ilmoitusviestin taustaväri määräytyy behavior-propin perusteella seuraavasti:

• Jos behavior on "positive", taustaväriksi asetetaan green;
• Jos behavior on "negative", taustaväriksi asetetaan red;
• Jos behavior on "neutral", taustaväriksi asetetaan blue.

Voimme luoda funktion, joka käsittelee tämän logiikan JavaScriptin switch-lauseella. Tässä esimerkki toteutuksesta:

// Function to set background color based on `behavior` prop
const setBackgroundColor = (behavior) => {
  switch (behavior) {
    case "positive":
      return "green";
    case "negative":
      return "red";
    case "neutral":
      return "blue";
    default:
      return "transparent";
  }
};

Tämä funktio ottaa behavior-propin argumenttina ja palauttaa vastaavan taustavärin arvon perusteella käyttäen switch-lausetta. Jos behavior-prop ei vastaa määriteltyjä tapauksia, palautetaan taustaväriksi transparent.

Lisätään tämä funktio komponentin tyyliolioon:

// Child component - `Notification`
const Notification = (props) => (
  <>
    {/* Step 2, : Apply default styles using inline styles */}
    {/* Step 4, : Apply the value for the `background-color` property 
    based on the `behavior` prop */}
    <p
      style={{
        ...notificationStyles,
        backgroundColor: setBackgroundColor(props.behavior),
      }}
    >
      {props.text}
    </p>
  </>
);

Hyödynnämme JavaScriptin käytäntöjä varmistaaksemme tyyliolion oikean rakenteen. Ensin levitetään olemassa oleva notificationStyles-olio. Sen jälkeen lisätään uusi ominaisuus, backgroundColor, jonka arvo saadaan setBackgroundColor-funktion palauttamasta merkkijonosta.

Koko sovelluksen koodi: