لأوسع جمهور ممكن ، يجب أن يتواصل تطبيقك بمجموعة من اللغات. اكتشف كيف تجعل هذه المهمة أقل صعوبة.

React Intl هي مكتبة شائعة توفر مجموعة من المكونات والأدوات المساعدة لتدويل تطبيقات React. التدويل ، المعروف أيضًا باسم i18n ، هو عملية تكييف تطبيق ما مع لغات وثقافات مختلفة.

يمكنك بسهولة دعم لغات ولغات متعددة في تطبيق React الخاص بك باستخدام ReactIntl.

تثبيت React Intl

لاستخدام مكتبة React Intl ، يجب عليك أولاً تثبيتها. يمكنك القيام بذلك مع أكثر من مدير حزم: npm أو الغزل أو pnpm.

لتثبيته باستخدام npm ، قم بتشغيل هذا الأمر في Terminal الخاص بك:

npm تثبيت رد فعل intl

لتثبيته باستخدام الغزل ، قم بتشغيل هذا الأمر:

إضافة الغزل تفاعل intl

كيفية استخدام مكتبة React Intl

بمجرد تثبيت مكتبة React Intl ، يمكنك استخدام مكوناتها وميزاتها في تطبيقك. لدى React Intl وظائف مشابهة لوظائف JavaScript Intl API.

بعض المكونات القيمة التي تقدمها مكتبة React Intl تشمل رسالة منسقة و IntlProvider عناصر.

يعرض مكون FormattedMessage سلاسل مترجمة في التطبيق الخاص بك ، بينما يوفر مكون IntlProvider معلومات الترجمات والتنسيق لتطبيقك.

instagram viewer

يجب عليك إنشاء ملف ترجمة قبل أن تتمكن من البدء في استخدام مكوني FormattedMessage و IntlProvider لترجمة تطبيقك. يحتوي ملف الترجمة على جميع الترجمات للتطبيق الخاص بك. يمكنك إنشاء ملفات منفصلة لكل لغة ومكان أو استخدام ملف واحد لاحتواء كل الترجمات.

على سبيل المثال:

يصدّرمقدار ثابت MessagesInFrench = {
 تحية: "Bonjour {name}"
}

يصدّرمقدار ثابت MessagesInItalian = {
 تحية: "Buongiorno {name}"
}

يحتوي ملف الترجمة هذا على كائنين للترجمة: MessagesIn الفرنسية و MessagesInItalian. يمكنك استبدال العنصر النائب {اسم} في ال تحية سلسلة في وقت التشغيل بقيمة ديناميكية.

لاستخدام الترجمات في التطبيق الخاص بك ، يجب عليك التفاف مكون الجذر للتطبيق الخاص بك بامتداد IntlProvider عنصر. يستغرق المكون IntlProvider ثلاثة رد الفعل الدعائم: اللغة, الافتراضي، و رسائل.

تقبل خاصية locale سلسلة تحدد لغة المستخدم ، بينما تحدد defaultLocale عنصرًا احتياطيًا إذا كانت اللغة المفضلة للمستخدم غير متاحة. أخيرًا ، تقبل خاصية Messages كائن ترجمة.

إليك مثال يوضح كيف يمكنك استخدام IntlProvider:

يستورد تتفاعل من"تتفاعل";
يستورد رد فعل من"رد فعل دوم / العميل";
يستورد برنامج من"./برنامج";
يستورد {IntlProvider} من"رد فعل دولي";
يستورد {messagesInFrench} من"./ترجمة";
ReactDOM.createRoot (وثيقة.getElementById ("جذر")).يجعل(

"الاب" Messages = {messagesInFrench} defaultLocale ="ar">

 </IntlProvider>
 </React.StrictMode>
);

هذا المثال يمر الاب اللغة ، ال MessagesIn الفرنسية الترجمة والافتراضي en اللغة إلى IntlProvider عنصر.

يمكنك تمرير أكثر من لغة واحدة أو كائن ترجمة ، و IntlProvider سيكتشف تلقائيًا لغة متصفح المستخدم ويستخدم الترجمات المناسبة.

لعرض السلاسل المترجمة في التطبيق الخاص بك ، استخدم ملف رسالة منسقة عنصر. ال رسالة منسقة المكون يأخذ بطاقة تعريف prop المطابق لمعرف الرسالة في كائن الرسائل.

المكون يأخذ أيضا الافتراضي و قيم دعم. ال الافتراضي تحدد الخاصية الخاصة رسالة احتياطية إذا كانت الترجمة غير متاحة للغة الحالية ، بينما قيم توفر الخاصية قيمًا ديناميكية للعناصر النائبة في رسائلك المترجمة.

على سبيل المثال:

يستورد تتفاعل من"تتفاعل";
يستورد {FormattedMessage} من"رد فعل دولي";
وظيفةبرنامج() {
يعود (





 معرف ="تحية"
 defaultMessage ="صباح الخير {name}"
 القيم = {{ اسم: 'جون'}}
 />
 </p>
 </div>
 );
}


يصدّرتقصير برنامج؛

في كتلة التعليمات البرمجية هذه ، ملف بطاقة تعريف دعامة من رسالة منسقة يستخدم المكون ال تحية مفتاح من MessagesIn الفرنسية الكائن و قيم الدعامة تحل محل {اسم} عنصر نائب بالقيمة "جون".

تنسيق الأرقام باستخدام مكون FormattedNumber

يوفر React Intl أيضًا تم تنسيقه المكون الذي يمكنك استخدامه لتنسيق الأرقام بناءً على الإعدادات المحلية الحالية. يقبل المكون الخاصيات المختلفة لتخصيص التنسيق ، مثل النمط والعملة والحد الأدنى والحد الأقصى من أرقام الكسر.

وهنا بعض الأمثلة:

يستورد تتفاعل من"تتفاعل";
يستورد {FormattedNumber} من"رد فعل دولي";
وظيفةبرنامج() {
يعود (





 عدد عشري: <تم تنسيقهقيمة={123.456}أسلوب="عدد عشري" />
 </p>



 نسبه مئويه: <تم تنسيقهقيمة={123.456}أسلوب="نسبه مئويه" />
 </p>
 </div>
 );
}


يصدّرتقصير برنامج؛

يستخدم هذا المثال الامتداد تم تنسيقه المكون الذي يقبل أ قيمة prop تحديد الرقم الذي تريد تنسيقه.

باستخدام أسلوب prop ، يمكنك تخصيص مظهر الرقم المنسق. يمكنك ضبط ملف أسلوب دعم ل عدد عشري, نسبه مئويه، أو عملة.

عندما تقوم بتعيين ملف أسلوب دعم للعملة ، و تم تنسيقه المكون بتنسيق الرقم كقيمة عملة باستخدام الكود المحدد في عملة دعم:

يستورد تتفاعل من"تتفاعل";
يستورد {FormattedNumber} من"رد فعل دولي";
وظيفةبرنامج() {
يعود (





 سعر: <تم تنسيقهقيمة={123.456}أسلوب="عملة"عملة="دولار أمريكي" />
 </p>
 </div>
 );
}


يصدّرتقصير برنامج؛

ال تم تنسيقه المكون ينسق الرقم في مقطع التعليمات البرمجية أعلاه باستخدام عملة أسلوب و دولار أمريكي رمز العملة.

يمكنك أيضًا تنسيق الأرقام بعدد محدد من المنازل العشرية باستخدام ملف minFractionDigits و maxFractionDigits الدعائم.

ال minFractionDigits تحدد الخاصية الحد الأدنى لعدد أرقام الكسور المراد عرضها. في المقابل ، فإن maxFractionDigits تحدد الخاصية العدد الأقصى لأرقام الكسور.

إذا كان الرقم يحتوي على عدد من الكسور أقل من المحدد minFractionDigits، ستعمل React Intl على حشوها بالأصفار. إذا كان الرقم يحتوي على أرقام كسرية أكثر من المحدد maxFractionDigits، ستقوم المكتبة بتقريب الرقم إلى الأعلى.

إليك مثال يوضح كيف يمكنك استخدام هذه الدعائم:

يستورد تتفاعل من"تتفاعل";
يستورد {FormattedNumber} من"رد فعل دولي";
وظيفةبرنامج() {
يعود (





 القيمة = {123.4567}
 minFractionDigits = {2}
 maxFractionDigits = {3}
 />
 </p>
 </div>
 );
}


يصدّرتقصير برنامج؛

تنسيق التواريخ باستخدام مكون FormattedDate

يمكنك تنسيق التواريخ بطريقة متسقة وسهلة القراءة باستخدام React Intl. ال تاريخ التنسيق يوفر المكون طريقة بسيطة وفعالة لتنسيق التواريخ. إنه يعمل بشكل مشابه لـ مكتبات التاريخ والوقت التي تقوم بتنسيق التواريخ ، مثل Moment.js.

يأخذ مكون FormattedDate العديد من الخاصيات ، مثل قيمة, يوم, شهر، و سنة. تقبل خاصية value التاريخ الذي تريد تنسيقه ، بينما تهيئ الخاصيات الأخرى تنسيقها.

على سبيل المثال:

يستورد تتفاعل من"تتفاعل";
يستورد {تاريخ التنسيق} من"رد فعل دولي";
وظيفةبرنامج() {
مقدار ثابت اليوم = جديدتاريخ();


يعود (





 اليومتاريخ هو
 القيمة = {اليوم}
 اليوم ="رقمية"
 الشهر ="طويل"
 سنة ="رقمية"
 />
 </p>
 </div>
 );
}


يصدّرتقصير برنامج؛

في هذا المثال ، فإن ملف قيمة يستخدم prop التاريخ الحالي. أيضًا ، باستخدام ملف يوم, شهر، و سنة الدعائم ، فأنت تحدد أنك تريد عرض السنة والشهر واليوم بتنسيق طويل.

جنبًا إلى جنب مع اليوم والشهر والسنة ، تعمل الدعائم الأخرى أيضًا على تنسيق مظهر التاريخ. فيما يلي الدعائم والقيم التي يقبلونها:

  • سنة: "رقمية" ، "رقمان"
  • شهر: "رقمية" ، "رقمين" ، "ضيقة" ، "قصيرة" ، "طويلة"
  • يوم: "رقمية" ، "رقمان"
  • ساعة: "رقمية" ، "رقمان"
  • دقيقة: "رقمية" ، "رقمان"
  • ثانية: "رقمية" ، "رقمان"
  • timeZoneName: "قصير، طويل"

يمكنك أيضًا استخدام ملف تاريخ التنسيق مكون التنسيق ووقت العرض:

يستورد تتفاعل من"تتفاعل";
يستورد {تاريخ التنسيق} من"رد فعل دولي";
وظيفةبرنامج() {
مقدار ثابت اليوم = جديدتاريخ();


يعود (





 الوقت هو
 القيمة = {اليوم}
 ساعة ="رقمية"
 دقيقة ="رقمية"
 الثانية ="رقمية"
 />
 </p>
 </div>
 );
}


يصدّرتقصير برنامج؛

قم بتدويل تطبيقات التفاعل الخاصة بك لجمهور أوسع

لقد تعلمت كيفية تثبيت مكتبة React-Intl وإعدادها في تطبيق React الخاص بك. يسهل React-intl تنسيق أرقام وتواريخ وعملات تطبيق React الخاص بك. يمكنك تنسيق البيانات بناءً على الإعدادات المحلية للمستخدم باستخدام مكونات FormattedMessage و FormattedNumber و FormattedDate.

غالبًا ما يرتكب مطورو React أخطاء يمكن أن تؤدي إلى عواقب وخيمة. على سبيل المثال ، الفشل في تحديث الحالة بشكل صحيح. من المهم أن تكون على دراية بهذه الأخطاء الشائعة وتصحيحها مبكرًا لتجنب المشاكل المكلفة.