Låt oss skapa en mångsidig Notification-komponent som visar text och dynamiskt ändrar egenskapen background-color baserat på prop:en behavior. Vi går vidare med implementeringen steg för steg.

Steg 1

Vi börjar med att skapa föräldrakomponenten, App, tillsammans med barnkomponenten, Notification, med den grundläggande strukturen för 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

För att tillhandahålla standardstil för Notification-komponenten skapar vi ett objekt som kallas notificationStyles och tilldelar följande egenskaper: padding med värdet "20px"; fontSize med värdet "24px"; color med värdet "aquamarine";

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

Tilldela objektet notificationStyles som värde till attributet style på Notification component-komponenten, vilket appliceras på det returnerade 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 använda Notification-komponenten genom att skicka in prop:arna behavior och text. Prop:en behavior avgör utseendet på notifikationen, medan prop:en text anger texten som ska visas 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" />
  </>
);

Steg 4

Vi kan implementera logiken för att färgsätta bakgrunden på varje notifikationsmeddelande baserat på prop:en behavior på följande sätt:

• Om värdet på behavior är "positive" ska bakgrundsfärgen vara green;
• Om värdet på behavior är "negative" ska bakgrundsfärgen vara red;
• Om värdet på behavior är "neutral" ska bakgrundsfärgen vara blue.

Vi kan skapa en funktion för att hantera logiken med hjälp av JavaScript:s switch-sats. Här är ett exempel på hur det kan implementeras:

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

Denna funktion tar prop:en behavior som argument och returnerar motsvarande bakgrundsfärg baserat på värdet med hjälp av switch-satsen. Prop:en behavior kommer att returnera en transparent bakgrundsfärg om den inte matchar de angivna fallen.

Låt oss införliva denna funktion i komponentens stilobjekt:

// 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 använder JavaScript-konventioner för att säkerställa korrekt struktur på stilobjektet. Först sprider vi det befintliga objektet notificationStyles. Därefter introducerar vi en ytterligare egenskap, backgroundColor, vars värde hämtas från strängen som returneras av funktionen setBackgroundColor.

Fullständig appkod: