Laten we een veelzijdige Notification-component maken die tekst weergeeft en dynamisch de eigenschap background-color aanpast op basis van de behavior-prop. We gaan stap voor stap te werk bij de implementatie.

Stap 1

We beginnen met het aanmaken van de oudercomponent, App, samen met de kindcomponent, Notification, volgens de basisstructuur van 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 />);

Stap 2

Om standaardopmaak voor de Notification-component te bieden, maken we een object genaamd notificationStyles en wijzen we de volgende eigenschappen toe: padding met de waarde "20px"; fontSize met de waarde "24px"; color met de waarde "aquamarine";

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

We wijzen het notificationStyles-object toe als waarde aan het style-attribuut van de Notification component-component, dat wordt toegepast op het geretourneerde p-element.

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

Stap 3

In de App-component kunnen we de Notification-component gebruiken door de behavior-prop en de text-prop door te geven. De behavior-prop bepaalt het uiterlijk van de notificatie, terwijl de text-prop de tekst specificeert die binnen de notificatie wordt weergegeven.

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

Stap 4

We kunnen de logica implementeren om de achtergrondkleur van elk notificatiebericht te bepalen op basis van de behavior-prop op de volgende manier:

• Als de waarde van behavior "positive" is, moet de achtergrondkleur worden ingesteld op green;
• Als de waarde van behavior "negative" is, moet de achtergrondkleur worden ingesteld op red;
• Als de waarde van behavior "neutral" is, moet de achtergrondkleur worden ingesteld op blue.

We kunnen een functie maken om deze logica af te handelen met behulp van de JavaScript switch-instructie. Hier is een voorbeeld van hoe dit geïmplementeerd kan worden:

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

Deze functie neemt de behavior-prop als argument en retourneert de bijbehorende achtergrondkleur op basis van de waarde met behulp van de switch-instructie. De behavior-prop retourneert een transparent achtergrondkleur als deze niet overeenkomt met de opgegeven gevallen.

Laten we deze functie integreren in het stijlobject van de component:

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

We gebruiken JavaScript-conventies om de juiste structuur van het stijlobject te waarborgen. Eerst spreiden we het bestaande notificationStyles-object. Vervolgens voegen we een extra eigenschap toe, backgroundColor, waarvan de waarde is afgeleid van de string die wordt geretourneerd door de setBackgroundColor-functie.

Volledige app-code: