עבור הקהל הרחב ביותר האפשרי, האפליקציה שלך צריכה לתקשר במגוון שפות. גלה כיצד להפוך את המשימה הזו לפחות מרתיעה.

React Intl היא ספרייה פופולרית המספקת סט של רכיבים וכלי עזר לבינלאומיזציה של יישומי React. אינטרנציונליזציה, הידועה גם בשם i18n, היא תהליך התאמת אפליקציה לשפות ותרבויות שונות.

אתה יכול לתמוך בקלות במספר שפות ומקומות ביישום React שלך עם ReactIntl.

התקנת React Intl

כדי להשתמש בספריית React Intl, תחילה עליך להתקין אותה. אתה יכול לעשות את זה עם יותר ממנהל חבילות אחד: npm, yarn, או pnpm.

כדי להתקין אותו עם npm, הפעל את הפקודה הזו בטרמינל שלך:

npm להתקין את react-intl

כדי להתקין אותו באמצעות חוט, הפעל את הפקודה הזו:

yarn add react-intl

כיצד להשתמש בספריית React Intl

לאחר שהתקנת את ספריית React Intl, תוכל להשתמש ברכיבים ובתכונות שלה באפליקציה שלך. ל-React Intl יש פונקציות דומות ל- JavaScript Intl API.

כמה רכיבים יקרי ערך המוצעים על ידי ספריית React Intl כוללים את FormattedMessage ו IntlProvider רכיבים.

הרכיב FormattedMessage מציג מחרוזות מתורגמות ביישום שלך, בעוד שרכיב IntlProvider מספק את התרגומים ומידע העיצוב ליישום שלך.

instagram viewer

עליך ליצור קובץ תרגום לפני שתוכל להתחיל להשתמש ברכיבים FormattedMessage ו-IntlProvider כדי לתרגם את היישום שלך. קובץ תרגום מכיל את כל התרגומים עבור היישום שלך. אתה יכול ליצור קבצים נפרדים עבור כל שפה ומקום או להשתמש בקובץ בודד כדי להכיל את כל התרגומים.

לדוגמה:

יְצוּאconst messagesInFrench = {
 בְּרָכָה: "בונז'ור {שם}"
}

יְצוּאconst messagesInItalian = {
 בְּרָכָה: "Buongiorno {name}"
}

קובץ תרגום לדוגמה זה מכיל שני אובייקטי תרגום: הודעות בצרפתית ו הודעות באיטלקית. אתה יכול להחליף את מציין המיקום {שֵׁם} בתוך ה בְּרָכָה מחרוזת בזמן ריצה עם ערך דינמי.

כדי להשתמש בתרגומים ביישום שלך, עליך לעטוף את רכיב השורש של היישום שלך עם ה IntlProvider רְכִיב. רכיב IntlProvider לוקח שלושה אביזרי תגובה: מקומי, defaultLocale, ו הודעות.

ה-loce prop מקבל מחרוזת שמציינת את המקום של המשתמש, בעוד שה-defaultLocale מציין נפילה אם המקום המועדף על המשתמש אינו זמין. לבסוף, אביזר ההודעות מקבל אובייקט תרגום.

הנה דוגמה שמראה כיצד אתה יכול להשתמש ב- IntlProvider:

יְבוּא לְהָגִיב מ"לְהָגִיב";
יְבוּא ReactDOM מ"react-dom/client";
יְבוּא אפליקציה מ"./אפליקציה";
יְבוּא { IntlProvider } מ"react-intl";
יְבוּא { messagesInFrench } מ"./תִרגוּם";
ReactDOM.createRoot(מסמך.getElementById("שורש")).לְדַקלֵם(

"fr" messages={messagesInFrench} defaultLocale="he">

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

דוגמה זו עוברת את fr מקומי, ה הודעות בצרפתית תרגום, וברירת מחדל he מקומי ל- IntlProvider רְכִיב.

אתה יכול להעביר יותר ממקום אחד או אובייקט תרגום אחד, ואת IntlProvider יזהה אוטומטית את שפת הדפדפן של המשתמש וישתמש בתרגומים המתאימים.

כדי להציג מחרוזות מתורגמות באפליקציה שלך, השתמש ב- FormattedMessage רְכִיב. ה FormattedMessage רכיב לוקח an תְעוּדַת זֶהוּת prop המתאים למזהה הודעה באובייקט ההודעות.

הרכיב גם לוקח א defaultMessage ו ערכים לִתְמוֹך. ה defaultMessage prop מציין הודעת חזרה אם תרגום אינו זמין עבור המקום הנוכחי, בעוד ש- ערכים prop מספק ערכים דינמיים עבור מצייני המיקום בהודעות המתורגמות שלך.

לדוגמה:

יְבוּא לְהָגִיב מ"לְהָגִיב";
יְבוּא { FormattedMessage } מ"react-intl";
פוּנקצִיָהאפליקציה() {
לַחֲזוֹר (





 id="בְּרָכָה"
 defaultMessage="בוקר טוב {שם}"
 ערכים={{ שֵׁם: 'ג'ון'}}
 />
 </p>
 </div>
 );
}


יְצוּאבְּרִירַת מֶחדָל אפליקציה;

בבלוק קוד זה, ה תְעוּדַת זֶהוּת אבזר של ה FormattedMessage רכיב משתמש ב- בְּרָכָה מפתח מה- הודעות בצרפתית חפץ, ואת ערכים אבזר מחליף את {שֵׁם} מציין מיקום עם הערך "John".

עיצוב מספרים עם הרכיב FormattedNumber

React Intl מספקת גם את FormattedNumber רכיב שבו אתה יכול להשתמש כדי לעצב מספרים על סמך המקום הנוכחי. הרכיב מקבל אביזרים שונים להתאמה אישית של העיצוב, כגון סגנון, מטבע וספרות מינימום ומקסימום שבר.

הנה כמה דוגמאות:

יְבוּא לְהָגִיב מ"לְהָגִיב";
יְבוּא { FormattedNumber } מ"react-intl";
פוּנקצִיָהאפליקציה() {
לַחֲזוֹר (





 נקודה: <FormattedNumberערך={123.456}סִגְנוֹן="נקודה" />
 </p>



 אָחוּז: <FormattedNumberערך={123.456}סִגְנוֹן="אָחוּז" />
 </p>
 </div>
 );
}


יְצוּאבְּרִירַת מֶחדָל אפליקציה;

דוגמה זו משתמשת ב- FormattedNumber רכיב המקבל א ערך prop המציין את המספר שברצונך לעצב.

משתמש ב סִגְנוֹן prop, אתה יכול להתאים אישית את המראה של המספר המעוצב. אתה יכול להגדיר את סִגְנוֹן תמך ל נקודה, אָחוּז, או מַטְבֵּעַ.

כאשר אתה מגדיר את סִגְנוֹן תמיכה למטבע, ה FormattedNumber רכיב מעצב את המספר כערך מטבע באמצעות הקוד המצוין ב- מַטְבֵּעַ לִתְמוֹך:

יְבוּא לְהָגִיב מ"לְהָגִיב";
יְבוּא { FormattedNumber } מ"react-intl";
פוּנקצִיָהאפליקציה() {
לַחֲזוֹר (





 מחיר: <FormattedNumberערך={123.456}סִגְנוֹן="מַטְבֵּעַ"מַטְבֵּעַ="דולר אמריקאי" />
 </p>
 </div>
 );
}


יְצוּאבְּרִירַת מֶחדָל אפליקציה;

ה FormattedNumber רכיב מעצב את המספר בבלוק הקוד שלמעלה באמצעות ה- מַטְבֵּעַ סגנון ואת דולר אמריקאי קוד מטבע.

אתה יכול גם לעצב מספרים עם מספר מסוים של מקומות עשרוניים באמצעות ה- minimumFractionDigits ו maximumFractionDigits אביזרים.

ה minimumFractionDigits prop מציין את המספר המינימלי של ספרות שבר להצגה. לעומת זאת, ה maximumFractionDigits prop מציין את המספר המרבי של ספרות שבר.

אם למספר יש פחות ספרות שבר מהמספר שצוין minimumFractionDigits, React Intl ירפד אותו באפסים. אם למספר יש יותר ספרות שבר מהמספר שצוין maximumFractionDigits, הספרייה תעגל את המספר כלפי מעלה.

הנה דוגמה שמראה כיצד אתה יכול להשתמש באביזרים האלה:

יְבוּא לְהָגִיב מ"לְהָגִיב";
יְבוּא { FormattedNumber } מ"react-intl";
פוּנקצִיָהאפליקציה() {
לַחֲזוֹר (





 ערך={123.4567}
 minimumFractionDigits={2}
 maximumFractionDigits={3}
 />
 </p>
 </div>
 );
}


יְצוּאבְּרִירַת מֶחדָל אפליקציה;

עיצוב תאריכים עם רכיב FormattedDate

אתה יכול לעצב תאריכים בצורה עקבית וקלה לקריאה באמצעות React Intl. ה FormattedDate רכיב מספק דרך פשוטה ויעילה לעיצוב תאריכים. זה עובד בדומה ל ספריות תאריך-שעה המעצבות תאריכים, כגון Moment.js.

הרכיב FormattedDate דורש אביזרים רבים, כגון ערך, יְוֹם, חוֹדֶשׁ, ו שָׁנָה. ה-value prop מקבל את התאריך שברצונך לעצב, והאביזרים האחרים מגדירים את העיצוב שלו.

לדוגמה:

יְבוּא לְהָגִיב מ"לְהָגִיב";
יְבוּא { FormattedDate } מ"react-intl";
פוּנקצִיָהאפליקציה() {
const היום = חָדָשׁתַאֲרִיך();


לַחֲזוֹר (





 היוםהתאריך של הוא
 value={היום}
 יום="מספרי"
 חודש="ארוך"
 שנה="מספרי"
 />
 </p>
 </div>
 );
}


יְצוּאבְּרִירַת מֶחדָל אפליקציה;

בדוגמה זו, ה ערך prop משתמש בתאריך הנוכחי. כמו כן, באמצעות יְוֹם, חוֹדֶשׁ, ו שָׁנָה אביזרים, אתה מציין שאתה רוצה שהשנה, החודש והיום יוצגו בפורמט ארוך.

לצד יום, חודש ושנה, אביזרים אחרים גם מעצבים את הופעת התאריך. להלן האביזרים והערכים שהם מקבלים:

  • שָׁנָה: "מספרי", "2 ספרתי"
  • חוֹדֶשׁ: "מספרי", "דו ספרתי", "צר", "קצר", "ארוך"
  • יְוֹם: "מספרי", "2 ספרתי"
  • שָׁעָה: "מספרי", "2 ספרתי"
  • דַקָה: "מספרי", "2 ספרתי"
  • שְׁנִיָה: "מספרי", "2 ספרתי"
  • timeZoneName: "קצר ארוך"

אתה יכול גם להשתמש ב FormattedDate רכיב לעיצוב וזמן תצוגה:

יְבוּא לְהָגִיב מ"לְהָגִיב";
יְבוּא { FormattedDate } מ"react-intl";
פוּנקצִיָהאפליקציה() {
const היום = חָדָשׁתַאֲרִיך();


לַחֲזוֹר (





 השעה היא
 value={היום}
 שעה="מספרי"
 דקה="מספרי"
 שני="מספרי"
 />
 </p>
 </div>
 );
}


יְצוּאבְּרִירַת מֶחדָל אפליקציה;

הפוך את יישומי ה-React שלך לבינלאומי עבור קהל רחב יותר

למדת כיצד להתקין ולהגדיר את ספריית React-Intl באפליקציית React שלך. React-intl מקל על עיצוב המספרים, התאריכים והמטבעות של אפליקציית React שלך. ניתן לעצב נתונים על סמך המקום של המשתמש באמצעות הרכיבים FormattedMessage, FormattedNumber ו-FormtedDate.

מפתחי React עושים לעתים קרובות טעויות שעלולות להוביל לתוצאות חמורות. לדוגמה, אי עדכון המצב כראוי. חשוב להיות מודעים לטעויות הנפוצות הללו ולתקן אותן מוקדם כדי למנוע בעיות יקרות.