استخدم مساعدك المفضل للملخص واستخدم هذه الصفحة والموفر AI الذي تريده
بدءاً من الدمج مع خادم MCP Intlayer ، يمكن لمساعدك الذكي الاسترجاع من جميع المستندات مباشرة من ChatGPT ، DeepSeek ، Cursor ، VSCode ، إلخ.
عرض الوثائق الخاصة بالخادم MCPتمت ترجمة محتوى هذه الصفحة باستخدام الذكاء الاصطناعي.
اعرض آخر نسخة المحتوى الأصلي باللغة الإنكليزيةإذا كان لديك فكرة لتحسين هذه الوثيقة، فلا تتردد في المساهمة من خلال تقديم طلب سحب على GitHub.
رابط GitHub للتوثيقنسخ الـ Markdown من المستند إلى الحافظة
تكامل React: توثيق هوك useIntlayer
يوفر هذا القسم إرشادات مفصلة حول استخدام هوك useIntlayer داخل تطبيقات React، مما يتيح تعريب المحتوى بكفاءة.
استيراد useIntlayer في React
يمكن دمج هوك useIntlayer في تطبيقات React عن طريق استيراده بناءً على السياق:
مكون العميل:
typescriptنسخ الكودنسخ الكود إلى الحافظة
import { useIntlayer } from "react-intlayer"; // يُستخدم في مكونات React على جانب العميل
مكون الخادم:
المعاملات
يقبل الـ hook معاملين:
- key: مفتاح القاموس لاسترجاع المحتوى المحلي.
- locale (اختياري): اللغة المطلوبة. القيمة الافتراضية هي لغة السياق إذا لم يتم تحديدها.
القاموس
يجب إعلان جميع مفاتيح القاموس داخل ملفات إعلان المحتوى لتعزيز أمان النوع وتجنب الأخطاء. يمكنك العثور على تعليمات الإعداد هنا.
مثال على الاستخدام في React
عرض استخدام الـ useIntlayer hook داخل مكون React:
نسخ الكود إلى الحافظة
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> </> );};
نسخ الكود إلى الحافظة
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> );};
نسخ الكود إلى الحافظة
import { useIntlayer } from "react-intlayer/server";const ServerComponentExample = () => { const content = useIntlayer("server-component"); return ( <div> <h1>{content.title}</h1> <p>{content.description}</p> </div> );};
التعامل مع السمات
عند تعريب السمات، قم بالوصول إلى قيم المحتوى بشكل مناسب:
نسخ الكود إلى الحافظة
<button title={content.buttonTitle.value}>{content.buttonText}</button>
موارد إضافية
- محرر Intlayer المرئي: لتجربة إدارة محتوى أكثر سهولة وبديهية، راجع توثيق المحرر المرئي هنا.
تستهدف هذه القسم بشكل خاص دمج الخطاف useIntlayer في تطبيقات React، مما يبسط عملية التعريب ويضمن تناسق المحتوى عبر اللغات المختلفة.
تاريخ التوثيق
- 5.5.10 - 2025-06-29: بداية السجل