استخدم مساعدك المفضل للملخص واستخدم هذه الصفحة والموفر AI الذي تريده
بدءاً من الدمج مع خادم MCP Intlayer ، يمكن لمساعدك الذكي الاسترجاع من جميع المستندات مباشرة من ChatGPT ، DeepSeek ، Cursor ، VSCode ، إلخ.
عرض الوثائق الخاصة بالخادم MCPتمت ترجمة محتوى هذه الصفحة باستخدام الذكاء الاصطناعي.
اعرض آخر نسخة المحتوى الأصلي باللغة الإنكليزيةإذا كان لديك فكرة لتحسين هذه الوثيقة، فلا تتردد في المساهمة من خلال تقديم طلب سحب على GitHub.
رابط GitHub للتوثيقنسخ الـ Markdown من المستند إلى الحافظة
تكامل React: توثيق هوك useLocale
يوفر هذا القسم تفاصيل شاملة حول هوك useLocale من مكتبة react-intlayer، المصممة لإدارة الإعدادات المحلية في تطبيقات React.
استيراد useLocale في React
لدمج هوك useLocale في تطبيق React الخاص بك، قم باستيراده من الحزمة الخاصة به:
نسخ الكود إلى الحافظة
import { useLocale } from "react-intlayer"; // يستخدم في مكونات React لإدارة الإعدادات المحلية
نظرة عامة
يوفر هوك useLocale طريقة سهلة للوصول إلى إعدادات اللغة والتعامل معها داخل مكونات React. حيث يتيح الوصول إلى اللغة الحالية، اللغة الافتراضية، جميع اللغات المتاحة، بالإضافة إلى دوال لتحديث إعدادات اللغة.
الاستخدام
إليك كيفية استخدام هوك useLocale داخل مكون React:
نسخ الكود إلى الحافظة
import type { FC } from "react";import { useLocale } from "react-intlayer";const LocaleSwitcher: FC = () => { const { locale, defaultLocale, availableLocales, setLocale } = useLocale(); return ( <div> <h1>اللغة الحالية: {locale}</h1> <p>اللغة الافتراضية: {defaultLocale}</p> <select value={locale} onChange={(e) => setLocale(e.target.value)}> {availableLocales.map((loc) => ( <option key={loc} value={loc}> {loc} </option> ))} </select> </div> );};export default LocaleSwitcher;
المعاملات وقيم الإرجاع
عند استدعاء هوك useLocale، فإنه يعيد كائنًا يحتوي على الخصائص التالية:
- locale: اللغة الحالية كما تم تعيينها في سياق React.
- defaultLocale: اللغة الأساسية المعرفة في الإعدادات.
- availableLocales: قائمة بجميع اللغات المتاحة كما هو معرف في الإعدادات.
- setLocale: دالة لتحديث اللغة الحالية ضمن سياق التطبيق.
مثال
يوضح هذا المثال مكونًا يستخدم هوك useLocale لعرض مبدل اللغة، مما يسمح للمستخدمين بتغيير لغة التطبيق ديناميكيًا:
نسخ الكود إلى الحافظة
import type { FC } from "react";import { useLocale } from "react-intlayer";const LocaleSelector: FC = () => { const { locale, setLocale, availableLocales } = useLocale(); const handleLocaleChange = (newLocale) => { setLocale(newLocale); }; return ( <select value={locale} onChange={(e) => handleLocaleChange(e.target.value)}> {availableLocales.map((locale) => ( <option key={locale} value={locale}> {locale} </option> ))} </select> );};
الخاتمة
تُعدّ الخطاف useLocale من مكتبة react-intlayer أداة أساسية لإدارة اللغات في تطبيقات React الخاصة بك، حيث توفر الوظائف اللازمة لتكييف تطبيقك مع جماهير دولية متنوعة بفعالية.
تاريخ الوثيقة
- 5.5.10 - 2025-06-29: بدء التاريخ