Bedingter Inhalt / Bedingung in Intlayer

Wie Bedingung funktioniert

In Intlayer wird bedingter Inhalt durch die cond-Funktion erreicht, die spezifische Bedingungen (typischerweise boolesche Werte) ihren entsprechenden Inhalten zuordnet. Dieser Ansatz ermöglicht es Ihnen, Inhalte dynamisch basierend auf einer gegebenen Bedingung auszuwählen. Wenn es mit React Intlayer oder Next Intlayer integriert ist, wird der entsprechende Inhalt automatisch gemäß der zur Laufzeit bereitgestellten Bedingung ausgewählt.

Einrichten von bedingtem Inhalt

Um bedingten Inhalt in Ihrem Intlayer-Projekt einzurichten, erstellen Sie ein Inhaltsmodul, das Ihre bedingten Definitionen enthält. Nachfolgend finden Sie Beispiele in verschiedenen Formaten.

import { cond, type Dictionary } from "intlayer";const myConditionalContent = {  key: "my_key",  content: {    myCondition: cond({      true: "mein Inhalt, wenn es wahr ist",      false: "mein Inhalt, wenn es falsch ist",      fallback: "mein Inhalt, wenn die Bedingung fehlschlägt", // Optional    }),  },} satisfies Dictionary;export default myConditionalContent;

Wenn kein Fallback deklariert ist, wird der zuletzt deklarierte Schlüssel als Fallback verwendet, falls die Bedingung nicht erfüllt ist.

Verwendung von bedingtem Inhalt mit React Intlayer

Um bedingten Inhalt innerhalb einer React-Komponente zu verwenden, importieren und nutzen Sie den useIntlayer-Hook aus dem react-intlayer-Paket. Dieser Hook ruft den Inhalt für den angegebenen Schlüssel ab und ermöglicht es Ihnen, eine Bedingung zu übergeben, um die entsprechende Ausgabe auszuwählen.

import type { FC } from "react";import { useIntlayer } from "react-intlayer";const ConditionalComponent: FC = () => {  const { myCondition } = useIntlayer("my_key");  return (    <div>      <p>        {          /* Ausgabe: mein Inhalt, wenn es wahr ist */          myCondition(true)        }      </p>      <p>        {          /* Ausgabe: mein Inhalt, wenn es falsch ist */          myCondition(false)        }      </p>      <p>        {          /* Ausgabe: mein Inhalt, wenn die Bedingung fehlschlägt */          myCondition("")        }      </p>      <p>        {          /* Ausgabe: mein Inhalt, wenn die Bedingung fehlschlägt */          myCondition(undefined)        }      </p>    </div>  );};export default ConditionalComponent;

Zusätzliche Ressourcen

Für detailliertere Informationen zur Konfiguration und Nutzung finden Sie in den folgenden Ressourcen:

• Intlayer CLI Dokumentation
• React Intlayer Dokumentation
• Next Intlayer Dokumentation

Diese Ressourcen bieten weitere Einblicke in die Einrichtung und Nutzung von Intlayer in verschiedenen Umgebungen und Frameworks.