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: useIntlayer Hook Dokumentation
Dieser Abschnitt bietet eine detaillierte Anleitung zur Verwendung des useIntlayer Hooks in React-Anwendungen, um eine effiziente Inhaltslokalisierung zu ermöglichen.
Importieren von useIntlayer in React
Der useIntlayer Hook kann in React-Anwendungen integriert werden, indem er je nach Kontext importiert wird:
Client-Komponente:
typescriptCode kopierenKopieren Sie den Code in die Zwischenablage
import { useIntlayer } from "react-intlayer"; // Wird in clientseitigen React-Komponenten verwendet
Server-Komponente:
Parameter
Der Hook akzeptiert zwei Parameter:
- key: Der Wörterbuchschlüssel, um lokalisierten Inhalt abzurufen.
- locale (optional): Die gewünschte Locale. Standardmäßig wird die Locale des Kontexts verwendet, falls nicht angegeben.
Wörterbuch
Alle Wörterbuchschlüssel müssen in Inhaltsdeklarationsdateien deklariert werden, um die Typsicherheit zu erhöhen und Fehler zu vermeiden. Die Setup-Anleitung finden Sie hier.
Beispielhafte Verwendung in React
Demonstration des useIntlayer Hooks innerhalb einer React-Komponente:
Kopieren Sie den Code in die Zwischenablage
import type { FC } from "react";import { ClientComponentExample, ServerComponentExample } from "@components";import { IntlayerProvider } from "react-intlayer";import { useIntlayer, IntlayerServerProvider } from "react-intlayer/server";import { Locales } from "intlayer";const App: FC<{ locale: Locales }> = ({ locale }) => { const content = useIntlayer("homepage", locale); return ( <> <p>{content.introduction}</p> <IntlayerProvider locale={locale}> <ClientComponentExample /> </IntlayerProvider> <IntlayerServerProvider locale={locale}> <ServerComponentExample /> </IntlayerServerProvider> </> );};
Kopieren Sie den Code in die Zwischenablage
import type { FC } from "react";import { useIntlayer } from "react-intlayer";const ComponentExample: FC = () => { const content = useIntlayer("component-example"); return ( <div> <h1>{content.title}</h1> <p>{content.description}</p> </div> );};
Kopieren Sie den Code in die Zwischenablage
import { useIntlayer } from "react-intlayer/server";const ServerComponentExample = () => { const content = useIntlayer("server-component"); return ( <div> <h1>{content.title}</h1> <p>{content.description}</p> </div> );};const ServerComponentExample = () => { const content = useIntlayer("server-component"); return ( <div> <h1>{content.title}</h1> <p>{content.description}</p> </div> );};
Umgang mit Attributen
Beim Lokalisieren von Attributen greifen Sie entsprechend auf die Inhaltswerte zu:
Kopieren Sie den Code in die Zwischenablage
<button title={content.buttonTitle.value}>{content.buttonText}</button>
Zusätzliche Ressourcen
- Intlayer Visual Editor: Für eine intuitivere Verwaltung von Inhalten finden Sie die Dokumentation zum visuellen Editor hier.
Dieser Abschnitt richtet sich speziell an die Integration des useIntlayer Hooks in React-Anwendungen, um den Lokalisierungsprozess zu vereinfachen und die Konsistenz der Inhalte über verschiedene Sprachversionen hinweg sicherzustellen.
Dokumentationshistorie
- 5.5.10 - 2025-06-29: Initiale Historie