Lad os oprette en alsidig Notification-komponent, der viser tekst og dynamisk ændrer egenskaben background-color baseret på behavior-proppen. Vi gennemgår implementeringen trin for trin.

Trin 1

Vi starter med at oprette forældrekomponenten, App, sammen med barnekomponenten, Notification, ved at bruge den grundlæggende struktur i 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 />);

Trin 2

For at give standard styling til Notification-komponenten opretter vi et objekt kaldet notificationStyles og tildeler følgende egenskaber: padding med værdien "20px"; fontSize med værdien "24px"; color med værdien "aquamarine";

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

Tildel notificationStyles-objektet som værdien til style-attributten på Notification component-komponenten, som anvendes på det returnerede p-element.

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

Trin 3

I App-komponenten kan vi anvende Notification-komponenten ved at videregive behavior-proppen og text-proppen. behavior-proppen bestemmer udseendet af notifikationen, mens text-proppen angiver den tekst, der skal vises i notifikationen.

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

Trin 4

Vi kan implementere logikken for at farvelægge baggrunden på hver notifikationsbesked baseret på behavior-proppen på følgende måde:

• Hvis værdien af behavior er "positive", skal baggrundsfarven sættes til green;
• Hvis værdien af behavior er "negative", skal baggrundsfarven sættes til red;
• Hvis værdien af behavior er "neutral", skal baggrundsfarven sættes til blue.

Vi kan oprette en funktion til at håndtere logikken ved hjælp af JavaScript switch-sætningen. 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 funktion tager behavior-proppen som et argument og returnerer den tilsvarende baggrundsfarve baseret på værdien ved hjælp af switch-sætningen. behavior-proppen vil returnere en transparent baggrundsfarve, hvis den ikke matcher de angivne cases.

Lad os inkorporere denne funktion i stil-objektet for 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 anvender JavaScript-konventioner for at sikre den korrekte struktur af stil-objektet. Først spreder vi det eksisterende notificationStyles-objekt. Derefter tilføjer vi en ekstra egenskab, backgroundColor, hvis værdi er afledt af den streng, der returneres af setBackgroundColor-funktionen.

Fuldt app-kode: