Autor:
    Erstellung:2025-02-07Letzte Aktualisierung:2025-06-29

    Verschachtelung / Sub-Content-Referenzierung

    Wie Verschachtelung funktioniert

    In Intlayer wird die Verschachtelung durch die Funktion nest erreicht, die es Ihnen ermöglicht, Inhalte aus einem anderen Wörterbuch zu referenzieren und wiederzuverwenden. Anstatt Inhalte zu duplizieren, können Sie auf ein bestehendes Inhaltsmodul mit seinem Schlüssel verweisen.

    Nesting einrichten

    Um Nesting in Ihrem Intlayer-Projekt einzurichten, definieren Sie zunächst den Basisinhalt, den Sie wiederverwenden möchten. Dann verwenden Sie in einem separaten Content-Modul die Funktion nest, um diesen Inhalt zu importieren.

    Basis-Dictionary

    Nachfolgend ist ein Beispiel eines Basis-Dictionary zum Verschachteln in einem anderen Dictionary:

    firstDictionary.content.ts
    import { type Dictionary } from "intlayer";

const firstDictionary = {
  key: "key_of_my_first_dictionary",
  content: {
    content: "content",
    subContent: {
      contentNumber: 0,
      contentString: "string",
    },
  },
} satisfies Dictionary;

export default firstDictionary;

    Einrichtung der Verschachtelung

    To use nested content in a React component, leverage the useIntlayer hook from the react-intlayer package. This hook retrieves the correct content based on the specified key. Here's an example of how to use it:

    **/*.tsx
    import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const NestComponent: FC = () => {
const { fullNestedContent, partialNestedContent } = useIntlayer(
  "key_of_my_second_dictionary"
);

return (
  <div>
    <p>Full Nested Content: {JSON.stringify(fullNestedContent)}</p>
    <p>Partial Nested Value: {partialNestedContent}</p>
  </div>
);
};

export default NestComponent;

    Verwendung der Verschachtelung mit React Intlayer

    Um verschachtelte Inhalte in einer React-Komponente zu verwenden, nutzen Sie den useIntlayer-Hook aus dem Paket react-intlayer. Dieser Hook ruft den richtigen Inhalt basierend auf dem angegebenen Schlüssel ab. Hier ist ein Beispiel, wie Sie ihn verwenden können:

    **/*.tsx
    import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const NestComponent: FC = () => {
  const { fullNestedContent, partialNestedContent } = useIntlayer(
    "key_of_my_second_dictionary"
  );

  return (
    <div>
      <p>
        Vollständiger verschachtelter Inhalt:{" "}
        {JSON.stringify(fullNestedContent)}
        {/* Ausgabe: {"content": "content", "subContent": {"contentNumber": 0, "contentString": "string"}} */}
      </p>
      <p>
        Teilweise verschachtelter Wert: {partialNestedContent}
        {/* Ausgabe: 0 */}
      </p>
    </div>
  );
};

export default NestComponent;

    Zusätzliche Ressourcen

    Für detailliertere Informationen zur Konfiguration und Nutzung lesen Sie die folgenden Ressourcen:

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

    Datei
    Markdown