React-Integration: useDictionary Hook Dokumentation

Dieser Abschnitt bietet eine detaillierte Anleitung zur Verwendung des useDictionary Hooks in React-Anwendungen, um eine effiziente Handhabung lokalisierter Inhalte ohne visuellen Editor zu ermöglichen.

Importieren von useDictionary in React

Der useDictionary Hook kann in React-Anwendungen integriert werden, indem er je nach Kontext importiert wird:

• Client-Komponente:

  typescript

  Code kopieren

  Kopieren Sie den Code in die Zwischenablage

  import { useDictionary } from "react-intlayer"; // Wird in clientseitigen React-Komponenten verwendet

• Server-Komponente:

  typescript

  Code kopieren

  Kopieren Sie den Code in die Zwischenablage

  import { useDictionary } from "react-intlayer/server"; // Wird in serverseitigen React-Komponenten verwendet

Parameter

Der Hook akzeptiert zwei Parameter:

1. dictionary: Ein deklariertes Wörterbuchobjekt, das lokalisierte Inhalte für bestimmte Schlüssel enthält.
2. locale (optional): Die gewünschte Locale. Standardmäßig wird die Locale des aktuellen Kontexts verwendet, wenn keine angegeben ist.

Wörterbuch

Alle Wörterbuchobjekte sollten in strukturierten Inhaltsdateien deklariert werden, um Typsicherheit zu gewährleisten und Laufzeitfehler zu vermeiden. Die Einrichtungsanweisungen finden Sie hier. Hier ist ein Beispiel für die Inhaltsdeklaration:

import { t, type Dictionary } from "intlayer";const componentContent = {  key: "component-example",  content: {    title: t({      en: "Client Component Example",      fr: "Exemple de composant client",      es: "Ejemplo de componente cliente",    }),    content: t({      en: "This is the content of a client component example",      fr: "Ceci est le contenu d'un exemple de composant client",      es: "Este es el contenido de un ejemplo de componente cliente",    }),  },} satisfies Dictionary;export default componentContent;

Beispiel für die Verwendung in React

Nachfolgend ein Beispiel, wie der useDictionary Hook in einer React-Komponente verwendet wird:

import type { FC } from "react";tsx fileName="./ComponentExample.tsx" codeFormat="typescript"import type { FC } from "react";import { useDictionary } from "react-intlayer";import componentContent from "./component.content";const ComponentExample: FC = () => {  const { title, content } = useDictionary(componentContent);  return (    <div>      <h1>{title}</h1>      <p>{content}</p>    </div>  );};

Server-Integration

Wenn Sie den useDictionary Hook außerhalb des IntlayerProvider verwenden, muss die Locale beim Rendern der Komponente explizit als Parameter übergeben werden:

import type { FC } from "react";import { useDictionary } from "react-intlayer/server";import clientComponentExampleContent from "./component.content";const ServerComponentExample: FC<{ locale: string }> = ({ locale }) => {  const { content } = useDictionary(clientComponentExampleContent, locale);  return (    <div>      <h1>{content.title}</h1>      <p>{content.content}</p>    </div>  );};

Hinweise zu Attributen

Im Gegensatz zu Integrationen mit visuellen Editoren gelten hier keine Attribute wie buttonTitle.value. Stattdessen greifen Sie direkt auf die lokalisierten Strings zu, wie sie in Ihrem Inhalt deklariert sind.

<button title={content.title}>{content.content}</button>

Zusätzliche Tipps

• Typensicherheit: Verwenden Sie stets Dictionary, um Ihre Wörterbücher zu definieren und so Typensicherheit zu gewährleisten.
• Aktualisierungen der Lokalisierung: Stellen Sie bei Inhaltsaktualisierungen sicher, dass alle Sprachen konsistent sind, um fehlende Übersetzungen zu vermeiden.

Diese Dokumentation konzentriert sich auf die Integration des useDictionary Hooks und bietet einen optimierten Ansatz zur Verwaltung lokalisierter Inhalte, ohne auf Funktionen visueller Editoren angewiesen zu sein.

Dokumentationsverlauf

• 5.5.10 - 2025-06-29: Historie initialisiert