Stellen Sie Ihre Frage und erhalten Sie einen Resümee des Dokuments, indem Sie diese Seite und den AI-Anbieter Ihrer Wahl referenzieren
Durch die Integration des Intlayer MCP-Servers in Ihren bevorzugten AI-Assistenten können Sie alle Dokumente direkt von ChatGPT, DeepSeek, Cursor, VSCode usw. abrufen.
Dokumentation des MCP-Servers ansehenDer Inhalt dieser Seite wurde mit einer KI übersetzt.
Den englischen Originaltext ansehenWenn Sie eine Idee haben, um diese Dokumentation zu verbessern, zögern Sie bitte nicht, durch das Einreichen eines Pull-Requests auf GitHub beizutragen.
GitHub-Link zur DokumentationMarkdown des Dokuments in die Zwischenablage kopieren
React-Integration: useIntlayerAsync Hook Dokumentation
Der useIntlayerAsync Hook erweitert die Funktionalität von useIntlayer, indem er nicht nur vorgerenderte Wörterbücher zurückgibt, sondern auch Updates asynchron abruft. Dadurch ist er ideal für Anwendungen, die ihren lokalisierten Inhalt nach dem ersten Rendern häufig aktualisieren.
Überblick
- Asynchrones Laden von Wörterbüchern:
Beim ersten Mount gibt useIntlayerAsync zunächst ein vorab geladenes oder statisch eingebundenes lokales Wörterbuch zurück (genau wie useIntlayer) und lädt dann asynchron alle neu verfügbaren entfernten Wörterbücher nach und fügt sie zusammen. - Statusverwaltung des Ladevorgangs:
Der Hook stellt außerdem einen isLoading-Status bereit, der anzeigt, wann ein entferntes Wörterbuch geladen wird. Dies ermöglicht es Entwicklern, Ladeanzeigen oder Skeleton-Zustände für eine flüssigere Benutzererfahrung anzuzeigen.
Einrichtung der Umgebung
Intlayer bietet ein kopfloses Content Source Management (CSM)-System, das es Nicht-Entwicklern ermöglicht, Anwendungsinhalte nahtlos zu verwalten und zu aktualisieren. Durch die Verwendung des intuitiven Dashboards von Intlayer kann Ihr Team lokalisierten Text, Bilder und andere Ressourcen bearbeiten, ohne direkt den Code ändern zu müssen. Dies vereinfacht den Content-Management-Prozess, fördert die Zusammenarbeit und stellt sicher, dass Aktualisierungen schnell und einfach vorgenommen werden können.
Um mit Intlayer zu starten:
- Registrieren Sie sich und erhalten Sie einen Zugriffstoken unter https://intlayer.org/dashboard.
Fügen Sie die Zugangsdaten zu Ihrer Konfigurationsdatei hinzu:
Konfigurieren Sie in Ihrem React-Projekt den Intlayer-Client mit Ihren Zugangsdaten:intlayer.config.tsCode kopierenKopieren Sie den Code in die Zwischenablage
import type { IntlayerConfig } from "intlayer";export default { // ... editor: { clientId: process.env.INTLAYER_CLIENT_ID, clientSecret: process.env.INTLAYER_CLIENT_SECRET, },} satisfies IntlayerConfig;
Schieben Sie ein neues Sprachwörterbuch zu Intlayer:
bashCode kopierenKopieren Sie den Code in die Zwischenablage
npx intlayer dictionary push -d my-first-dictionary-key
Dieser Befehl lädt Ihre anfänglichen Inhaltswörterbücher hoch und macht sie für asynchrones Abrufen und Bearbeiten über die Intlayer-Plattform verfügbar.
Importieren von useIntlayerAsync in React
Importieren Sie in Ihren React-Komponenten useIntlayerAsync:
Kopieren Sie den Code in die Zwischenablage
import { useIntlayerAsync } from "react-intlayer";
Parameter
key: Typ: DictionaryKeys Der Wörterbuchschlüssel, der verwendet wird, um den lokalisierten Inhaltsblock zu identifizieren. Dieser Schlüssel sollte in Ihren Inhaltsdeklarationsdateien definiert sein.
locale (optional): Typ: Locales Die spezifische Locale, auf die Sie abzielen möchten. Wenn ausgelassen, verwendet der Hook die Locale aus dem aktuellen Intlayer-Kontext.
isRenderEditor (optional, Standardwert true): Typ: boolean Bestimmt, ob der Inhalt für die Darstellung mit der Intlayer-Editor-Overlay bereit sein soll. Wenn auf false gesetzt, schließen die zurückgegebenen Wörterbuchdaten editor-spezifische Funktionen aus.
Rückgabewert
Der Hook gibt ein Wörterbuchobjekt zurück, das lokalisierten Inhalt enthält, der durch key und locale indiziert ist. Es enthält außerdem ein isLoading-Boolean, das angibt, ob gerade ein entferntes Wörterbuch geladen wird.
Beispielhafte Verwendung in einer React-Komponente
Kopieren Sie den Code in die Zwischenablage
import { useEffect, type FC } from "react";import { useIntlayerAsync } from "react-intlayer";export const ComponentExample: FC = () => { const { title, description, isLoading } = useIntlayerAsync("async-component"); useEffect(() => { if (isLoading) { console.log("Inhalt wird geladen..."); } }, [isLoading]); return ( <div> {isLoading ? ( <div> <h1>Lädt…</h1> <p>Bitte warten Sie, während der Inhalt aktualisiert wird.</p> </div> ) : ( <div> <h1>{title.value}</h1> <p>{description.value}</p> </div> )} </div> );};
Wichtige Punkte:
- Beim ersten Rendern stammen title und description aus dem vorab geladenen oder statisch eingebetteten Lokalisierungswörterbuch.
- Solange isLoading auf true gesetzt ist, wird im Hintergrund eine Anfrage ausgeführt, um ein aktualisiertes Wörterbuch abzurufen.
- Sobald der Abruf abgeschlossen ist, werden title und description mit dem neuesten Inhalt aktualisiert, und isLoading wird wieder auf false gesetzt.
Umgang mit der Attribut-Lokalisierung
Sie können auch lokalisierte Attributwerte für verschiedene HTML-Eigenschaften abrufen (z. B. alt, title, aria-label):
Kopieren Sie den Code in die Zwischenablage
<img src={title.image.src.value} alt={title.image.alt.value} />
Wörterbuchdateien
Alle Inhalts-Schlüssel müssen in Ihren Inhaltsdeklarationsdateien definiert sein, um Typensicherheit zu gewährleisten und Laufzeitfehler zu vermeiden. Diese Dateien ermöglichen die TypeScript-Validierung, sodass Sie immer auf vorhandene Schlüssel und Sprachen verweisen.
Anleitungen zum Einrichten von Inhaltsdeklarationsdateien sind hier verfügbar.
Weitere Informationen
- Intlayer Visual Editor: Integration mit dem Intlayer Visual Editor zur Verwaltung und Bearbeitung von Inhalten direkt über die Benutzeroberfläche. Weitere Details hier.
Zusammenfassung, useIntlayerAsync ist ein leistungsstarker React-Hook, der entwickelt wurde, um die Benutzererfahrung zu verbessern und die Aktualität der Inhalte zu gewährleisten, indem vorgerenderte oder vorab geladene Wörterbücher mit asynchronen Wörterbuchaktualisierungen zusammengeführt werden. Durch die Nutzung von isLoading und TypeScript-basierten Inhaltsdeklarationen können Sie dynamische, lokalisierte Inhalte nahtlos in Ihre React-Anwendungen integrieren.
Dokumentationsverlauf
- 5.5.10 - 2025-06-29: Historie initialisiert