Lassen Sie uns eine vielseitige Notification-Komponente erstellen, die Text anzeigt und die Eigenschaft background-color dynamisch basierend auf der behavior-Eigenschaft ändert. Wir werden schrittweise mit der Implementierung fortfahren.

Schritt 1

Wir beginnen mit der Erstellung der übergeordneten Komponente App zusammen mit der untergeordneten Komponente Notification unter Verwendung der grundlegenden Struktur von 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 />);

Schritt 2

Um der Notification-Komponente eine Standardstilgebung zu geben, erstellen wir ein Objekt namens notificationStyles und weisen die folgenden Eigenschaften zu: padding mit dem Wert "20px"; fontSize mit dem Wert "24px"; color mit dem Wert "aquamarine";

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

Lassen Sie uns das notificationStyles-Objekt als Wert für das style-Attribut der Notification component-Komponente zuweisen, das auf das zurückgegebene p-Element angewendet wird.

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

Schritt 3

Im App-Komponente können wir die Notification-Komponente nutzen, indem wir die behavior-Eigenschaft und die text-Eigenschaft übergeben. Die behavior-Eigenschaft bestimmt das Erscheinungsbild der Benachrichtigung, während die text-Eigenschaft den anzuzeigenden Text innerhalb der Benachrichtigung angibt.

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

Schritt 4

Wir können die Logik implementieren, um den Hintergrund jeder Benachrichtigungsnachricht basierend auf der behavior-Eigenschaft wie folgt zu färben:

• Wenn der Wert von behavior "positive" ist, sollte die Hintergrundfarbe auf green gesetzt werden;
• Wenn der Wert von behavior "negative" ist, sollte die Hintergrundfarbe auf red gesetzt werden;
• Wenn der Wert von behavior "neutral" ist, sollte die Hintergrundfarbe auf blue gesetzt werden.

Wir können eine Funktion erstellen, um die Logik mit der JavaScript-Switch-Anweisung zu handhaben. Hier ist ein Beispiel, wie es implementiert werden kann:

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

Diese Funktion nimmt die behavior-Eigenschaft als Argument und gibt die entsprechende Hintergrundfarbe basierend auf dem Wert mit der switch-Anweisung zurück. Die behavior-Eigenschaft gibt eine transparent Hintergrundfarbe zurück, wenn sie nicht mit den angegebenen Fällen übereinstimmt.

Lassen Sie uns diese Funktion in das Stilobjekt der Komponente integrieren:

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

Wir nutzen JavaScript-Konventionen, um die richtige Struktur des Stilobjekts sicherzustellen. Zuerst verbreiten wir das bestehende notificationStyles-Objekt. Dann führen wir eine zusätzliche Eigenschaft ein, backgroundColor, deren Wert aus dem von der setBackgroundColor-Funktion zurückgegebenen String abgeleitet wird.

Vollständiger App-Code: