La oss lage en allsidig Notification-komponent som viser tekst og dynamisk endrer background-color-egenskapen basert på behavior-propen. Vi går gjennom implementeringen steg for steg.

Steg 1

Vi starter med å opprette foreldreakomponenten, App, sammen med barnekomponenten, Notification, ved å bruke grunnstrukturen til React.

// 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 />);

Steg 2

For å gi standardstil til Notification-komponenten, oppretter vi et objekt kalt notificationStyles og tildeler følgende egenskaper: padding med verdien "20px"; fontSize med verdien "24px"; color med verdien "aquamarine";

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

Vi tildeler notificationStyles-objektet som verdi til style-attributtet på Notification component-komponenten, som brukes på det returnerte p-elementet.

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

Steg 3

I App-komponenten kan vi bruke Notification-komponenten ved å sende inn behavior-prop og text-prop. behavior-propen bestemmer utseendet til varselet, mens text-propen angir teksten som skal vises i varselet.

// 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" />
  </>
);

Steg 4

Vi kan implementere logikken for å farge bakgrunnen til hver varselmelding basert på behavior-propen på følgende måte:

• Hvis verdien av behavior er "positive", skal bakgrunnsfargen settes til green;
• Hvis verdien av behavior er "negative", skal bakgrunnsfargen settes til red;
• Hvis verdien av behavior er "neutral", skal bakgrunnsfargen settes til blue.

Vi kan lage en funksjon for å håndtere logikken ved å bruke JavaScript sin switch-setning. Her er et eksempel på hvordan det kan implementeres:

// 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";
  }
};

Denne funksjonen tar inn behavior-propen som et argument og returnerer tilsvarende bakgrunnsfarge basert på verdien ved bruk av switch-setningen. behavior-propen vil returnere en transparent bakgrunnsfarge hvis den ikke samsvarer med de spesifiserte tilfellene.

La oss inkorporere denne funksjonen i stilobjektet til komponenten:

// 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>
  </>
);

Vi benytter JavaScript-konvensjoner for å sikre korrekt struktur på stilobjektet. Først sprer vi det eksisterende notificationStyles-objektet. Deretter introduserer vi en ekstra egenskap, backgroundColor, hvor verdien hentes fra strengen som returneres av setBackgroundColor-funksjonen.

Fullstendig app-kode: