React-Integration: useDictionary Hook Dokumentation

Dieser Abschnitt bietet detaillierte Anleitungen zur Verwendung des useDictionary Hooks innerhalb von React-Anwendungen, um die 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 entsprechend dem Kontext importiert wird:

• Client-Komponente:

  typescript

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

• Server-Komponente:

  typescript

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

Parameter

Der Hook akzeptiert zwei Parameter:

1. dictionary: Ein deklarierter Wörterbuch-Objekt, das lokalisierte Inhalte für spezifische Schlüssel enthält.
2. locale (optional): Die gewünschte Locale. Standardmäßig wird die Locale des aktuellen Kontexts verwendet, wenn nicht angegeben.

Inhaltsdeklaration

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

import { t, type DeclarationContent } 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 DeclarationContent;export default componentContent;

Beispielverwendung in React

Im Folgenden finden Sie ein Beispiel, wie Sie den useDictionary Hook in einer React-Komponente verwenden können:

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 bereitgestellt 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 Attribute wie buttonTitle.value hier nicht. Stattdessen greifen Sie direkt auf die lokalisierten Zeichenfolgen zu, wie sie in Ihrem Inhalt deklariert sind.

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

Zusätzliche Tipps

• Typsicherheit: Verwenden Sie immer DeclarationContent, um Ihre Wörterbücher zu definieren, um die Typsicherheit zu gewährleisten.
• Lokalisierungsaktualisierungen: Stellen Sie bei Aktualisierungen der Inhalte sicher, dass alle Locales 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.