استخدم مساعدك المفضل للملخص واستخدم هذه الصفحة والموفر AI الذي تريده
بدءاً من الدمج مع خادم MCP Intlayer ، يمكن لمساعدك الذكي الاسترجاع من جميع المستندات مباشرة من ChatGPT ، DeepSeek ، Cursor ، VSCode ، إلخ.
عرض الوثائق الخاصة بالخادم MCPتمت ترجمة محتوى هذه الصفحة باستخدام الذكاء الاصطناعي.
اعرض آخر نسخة المحتوى الأصلي باللغة الإنكليزيةإذا كان لديك فكرة لتحسين هذه الوثيقة، فلا تتردد في المساهمة من خلال تقديم طلب سحب على GitHub.
رابط GitHub للتوثيقنسخ الـ Markdown من المستند إلى الحافظة
تكامل React: توثيق خطاف useI18n
يوفر هذا القسم إرشادات مفصلة حول كيفية استخدام خطاف useI18n داخل تطبيقات React، مما يتيح تعريب المحتوى بكفاءة.
استيراد useI18n في React
يمكن استيراد خطاف useI18n ودمجه في تطبيقات React حسب السياق كما يلي:
مكونات العميل:
typescriptنسخ الكودنسخ الكود إلى الحافظة
import { useI18n } from "react-intlayer"; // استخدم في مكونات React على جانب العميل
مكونات الخادم:
المعاملات
يقبل هذا الخطاف معاملين:
- namespace: مساحة أسماء القاموس لتحديد نطاق مفاتيح الترجمة.
- locale (اختياري): اللغة المطلوبة. إذا لم يتم تحديدها، سيتم استخدام لغة السياق كافتراضي.
القاموس
يجب إعلان جميع مفاتيح القاموس داخل ملفات إعلان المحتوى لتعزيز سلامة النوع ومنع الأخطاء. يمكن العثور على تعليمات التكوين هنا.
أمثلة الاستخدام في React
أمثلة على استخدام الخطاف useI18n داخل مكونات React:
نسخ الكود إلى الحافظة
import type { FC } from "react";import { ClientComponentExample, ServerComponentExample } from "@components";import { IntlayerProvider } from "react-intlayer";import { useI18n, IntlayerServerProvider } from "react-intlayer/server";import { Locales } from "intlayer";const App: FC<{ locale: Locales }> = ({ locale }) => { const t = useI18n("home-page", locale); return ( <> <p>{t("introduction")}</p> <IntlayerProvider locale={locale}> <ClientComponentExample /> </IntlayerProvider> <IntlayerServerProvider locale={locale}> <ServerComponentExample /> </IntlayerServerProvider> </> );};
نسخ الكود إلى الحافظة
import type { FC } from "react";import { useI18n } from "react-intlayer";const ComponentExample: FC = () => { const t = useI18n("component-example"); return ( <div> <h1>{t("title")}</h1> {/* عرض العنوان */} <p>{t("description")}</p> {/* عرض الوصف */} </div> );};
نسخ الكود إلى الحافظة
import { useI18n } from "react-intlayer/server";const ServerComponentExample = () => { const t = useI18n("server-component"); return ( <div> <h1>{t("title")}</h1> {/* عرض العنوان */} <p>{t("description")}</p> {/* عرض الوصف */} </div> );};
التعامل مع السمات
عند تعريب السمات، قم بالوصول إلى قيم الترجمة بشكل مناسب:
نسخ الكود إلى الحافظة
<!-- بالنسبة لسمات الوصول (مثل aria-label)، استخدم .value لأن السلاسل النصية البحتة مطلوبة --><button aria-label={t("button.ariaLabel").value}>{t("button.text")}</button>
موارد إضافية
- محرر Intlayer المرئي: للحصول على تجربة إدارة محتوى أكثر سهولة وبديهية، راجع توثيق المحرر المرئي هنا.
يغطي هذا القسم بشكل خاص دمج الخطاف useI18n في تطبيقات React، مما يبسط عملية التعريب ويضمن اتساق المحتوى عبر اللغات المختلفة.
تاريخ التوثيق
- 6.0.0 - 2025-06-29: الكتابة الأولية لتوثيق الخطاف useI18n