Création d'un composant Notification polyvalent affichant un texte et modifiant dynamiquement la propriété background-color selon la prop behavior. Mise en œuvre étape par étape.

Étape 1

Création du composant parent, App, ainsi que du composant enfant, Notification, en utilisant la structure de base de 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 />);

Étape 2

Pour fournir un style par défaut au composant Notification, nous créons un objet appelé notificationStyles et lui attribuons les propriétés suivantes : padding avec la valeur "20px" ; fontSize avec la valeur "24px" ; color avec la valeur "aquamarine" ;

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

Attribuons l'objet notificationStyles à l'attribut style du composant Notification component, qui est appliqué à l'élément p retourné.

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

Étape 3

Dans le composant App, nous pouvons utiliser le composant Notification en passant la prop behavior et la prop text. La prop behavior détermine l'apparence de la notification, tandis que la prop text spécifie le texte à afficher dans la notification.

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

Étape 4

Nous pouvons implémenter la logique pour colorer l'arrière-plan de chaque message de notification en fonction de la prop behavior de la manière suivante :

• Si la valeur de behavior est "positive", la couleur de fond doit être définie sur green ;
• Si la valeur de behavior est "negative", la couleur de fond doit être définie sur red ;
• Si la valeur de behavior est "neutral", la couleur de fond doit être définie sur blue.

Nous pouvons créer une fonction pour gérer cette logique en utilisant l'instruction switch de JavaScript. Voici un exemple d'implémentation :

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

Cette fonction prend la prop behavior en argument et retourne la couleur de fond correspondante selon la valeur à l'aide de l'instruction switch. La prop behavior retournera une couleur de fond transparent si elle ne correspond à aucun des cas spécifiés.

Intégrons cette fonction dans l'objet de style du composant :

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

Nous utilisons les conventions JavaScript pour garantir la bonne structure de l'objet de style. Tout d'abord, nous étendons l'objet notificationStyles existant. Ensuite, nous ajoutons une propriété supplémentaire, backgroundColor, dont la valeur est dérivée de la chaîne retournée par la fonction setBackgroundColor.

Code complet de l'application :