Creiamo un componente Notification versatile che visualizza un testo e modifica dinamicamente la proprietà background-color in base alla prop behavior. Procederemo con l'implementazione passo dopo passo.

Passaggio 1

Iniziamo creando il componente genitore, App, insieme al componente figlio, Notification, utilizzando la struttura di base di 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 />);

Passo 2

Per fornire uno stile predefinito al componente Notification, creiamo un oggetto chiamato notificationStyles e assegniamo le seguenti proprietà: padding con valore "20px"; fontSize con valore "24px"; color con valore "aquamarine";

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

Assegniamo quindi l'oggetto notificationStyles come valore all'attributo style del componente Notification component, che viene applicato all'elemento p restituito.

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

Passo 3

Nel componente App, è possibile utilizzare il componente Notification passando la prop behavior e la prop text. La prop behavior determina l'aspetto della notifica, mentre la prop text specifica il testo da visualizzare all'interno della notifica.

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

Passo 4

Possiamo implementare la logica per colorare lo sfondo di ciascun messaggio di notifica in base alla prop behavior nel seguente modo:

• Se il valore di behavior è "positive", il colore di sfondo deve essere impostato su green;
• Se il valore di behavior è "negative", il colore di sfondo deve essere impostato su red;
• Se il valore di behavior è "neutral", il colore di sfondo deve essere impostato su blue.

Possiamo creare una funzione per gestire questa logica utilizzando l'istruzione switch di JavaScript. Ecco un esempio di implementazione:

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

Questa funzione prende la prop behavior come argomento e restituisce il colore di sfondo corrispondente in base al valore utilizzando l'istruzione switch. La prop behavior restituirà un colore di sfondo transparent se non corrisponde ai casi specificati.

Integriamo questa funzione nell'oggetto degli stili del componente:

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

Utilizziamo le convenzioni JavaScript per garantire la corretta struttura dell'oggetto degli stili. Prima, espandiamo l'oggetto notificationStyles esistente. Poi, introduciamo una proprietà aggiuntiva, backgroundColor, il cui valore è derivato dalla stringa restituita dalla funzione setBackgroundColor.

Codice completo dell'app: