Créons un composant Notification polyvalent qui affiche du texte et change dynamiquement la propriété background-color en fonction de la prop behavior. Nous procéderons à l'implémentation étape par étape.

Étape 1

Nous commençons par créer le composant parent, App, ainsi que le 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 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 comme valeur à 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 la logique en utilisant l'instruction switch de JavaScript. Voici un exemple de comment cela peut être implémenté :

// 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 comme argument et retourne la couleur de fond correspondante en fonction de la valeur en utilisant l'instruction switch. La prop behavior retournera une couleur de fond transparent si elle ne correspond pas aux cas spécifiés.

Incorporons 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 assurer la structure appropriée de l'objet de style. Tout d'abord, nous étendons l'objet notificationStyles existant. Ensuite, nous introduisons 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 :