За најширу могућу публику, ваша апликација треба да комуницира на различитим језицима. Сазнајте како да овај задатак учините мање застрашујућим.
Реацт Интл је популарна библиотека која обезбеђује скуп компоненти и услужних програма за интернационализацију Реацт апликација. Интернационализација, позната и као и18н, је процес прилагођавања апликације различитим језицима и културама.
Можете лако подржати више језика и локалитета у вашој Реацт апликацији помоћу РеацтИнтл-а.
Инсталирање Реацт Интл
Да бисте користили Реацт Интл библиотеку, прво морате да је инсталирате. Можете то учинити са више од једног менаџера пакета: нпм, иарн или пнпм.
Да бисте га инсталирали помоћу нпм-а, покрените ову команду у свом терминалу:
нпм инсталл реацт-интл
Да бисте га инсталирали помоћу предива, покрените ову команду:
иарн адд реацт-интл
Како користити Реацт Интл библиотеку
Када инсталирате Реацт Интл библиотеку, можете користити њене компоненте и функције у својој апликацији. Реацт Интл има сличне функције као ЈаваСцрипт Интл АПИ.
Неке вредне компоненте које нуди Реацт Интл библиотека укључују ФорматтедМессаге и ИнтлПровидер компоненте.
Компонента ФорматтедМессаге приказује преведене стрингове у вашој апликацији, док компонента ИнтлПровидер обезбеђује преводе и информације о форматирању вашој апликацији.
Морате креирати датотеку за превод пре него што почнете да користите компоненте ФорматтедМессаге и ИнтлПровидер за превођење ваше апликације. Датотека за превод садржи све преводе за вашу апликацију. Можете креирати засебне датотеке за сваки језик и локал или користити једну датотеку која садржи све преводе.
На пример:
извозконст мессагесИнФренцх = {
Поздрав: „Боњоур {наме}“
}
извозконст мессагесИнИталиан = {
Поздрав: „Буонгиорно {наме}“
}
Овај пример датотеке превода садржи два објекта за превођење: мессагесИнФренцх и мессагесИнИталиан. Можете да замените чувар места {наме} у Поздрав стринг у време извођења са динамичком вредношћу.
Да бисте користили преводе у својој апликацији, морате умотати коренску компоненту ваше апликације са ИнтлПровидер саставни део. Компонента ИнтлПровидер траје три Реацт пропс: лоцале, дефаултЛоцале, и поруке.
Пропис за локализацију прихвата стринг који специфицира корисников локал, док дефаултЛоцале наводи резервни ако жељени језик корисника није доступан. Коначно, подршка за поруке прихвата објекат превода.
Ево примера који показује како можете да користите ИнтлПровидер:
увоз Реаговати из"реаговати";
увоз РеацтДОМ из"реаговање-дом/клијент";
увоз Апликација из"./Апликација";
увоз {ИнтлПровидер} из"реаговати-интл";
увоз { мессагесИнФренцх } из"./транслатион";
РеацтДОМ.цреатеРоот(документ.гетЕлементБиИд("корен")).дати, пружити("фр" мессагес={мессагесИнФренцх} дефаултЛоцале="ен">
</IntlProvider>
</React.StrictMode>
);
Овај пример пролази кроз фр лоцале, тхе мессагесИнФренцх превод и подразумевано ен лоцале то тхе ИнтлПровидер саставни део.
Можете проследити више од једног локала или објекта превода, и ИнтлПровидер ће аутоматски открити језик претраживача корисника и користити одговарајуће преводе.
Да бисте приказали преведене стрингове у својој апликацији, користите ФорматтедМессаге саставни део. Тхе ФорматтедМессаге компонента узима ан ид проп који одговара ИД-у поруке у објекту поруке.
Компонента такође узима а дефаултМессаге и вредности проп. Тхе дефаултМессаге проп наводи резервну поруку ако превод није доступан за тренутни локал, док је вредности проп пружа динамичке вредности за чуваре места у вашим преведеним порукама.
На пример:
увоз Реаговати из"реаговати";
увоз { ФорматтедМессаге } из"реаговати-интл";функцијаАпликација() {
повратак (
ид="Поздрав"
дефаултМессаге=„Добро јутро {наме}“
вредности={{ име: 'Јован'}}
/>
</p>
</div>
);
}
извозУобичајено Апликација;
У овом блоку кода, ид проп оф тхе ФорматтедМессаге компонента користи Поздрав кључ од мессагесИнФренцх објекат, и вредности проп замењује {наме} чувар места са вредношћу "Јохн".
Форматирање бројева помоћу компоненте ФорматтедНумбер
Реацт Интл такође обезбеђује ФорматтедНумбер компонента коју можете да користите за форматирање бројева на основу тренутног локалитета. Компонента прихвата различите реквизите за прилагођавање форматирања, као што су стил, валута и минималне и максималне цифре разломка.
Ево неколико примера:
увоз Реаговати из"реаговати";
увоз { ФорматтедНумбер } из"реаговати-интл";функцијаАпликација() {
повратак (
Децималан: <ФорматтедНумбервредност={123.456}стил="децималан" />
</p>
Проценат: <ФорматтедНумбервредност={123.456}стил="проценат" />
</p>
</div>
);
}
извозУобичајено Апликација;
Овај пример користи ФорматтедНумбер компонента која прихвата а вредност проп који наводи број који желите да форматирате.
Помоћу стил проп, можете прилагодити изглед форматираног броја. Можете подесити стил проп то децималан, проценат, или валута.
Када поставите стил подршка валути, тхе ФорматтедНумбер компонента форматира број као вредност валуте користећи код наведен у валута реквизит:
увоз Реаговати из"реаговати";
увоз { ФорматтедНумбер } из"реаговати-интл";функцијаАпликација() {
повратак (
Цена: <ФорматтедНумбервредност={123.456}стил="валута"валута="АМЕРИЧКИ ДОЛАР" />
</p>
</div>
);
}
извозУобичајено Апликација;
Тхе ФорматтедНумбер компонента форматира број у блоку кода изнад користећи валута стил и Амерички долар шифра валуте.
Такође можете форматирати бројеве са одређеним бројем децималних места користећи минимумФрацтионДигитс и макимумФрацтионДигитс реквизити.
Тхе минимумФрацтионДигитс проп специфицира минимални број цифара разломка за приказ. Насупрот томе, тхе макимумФрацтионДигитс проп специфицира максималан број цифара разломака.
Ако број има мање цифара разломка од наведеног минимумФрацтионДигитс, Реацт Интл ће га напунити нулама. Ако број има више цифара разломка од наведеног макимумФрацтионДигитс, библиотека ће заокружити број навише.
Ево примера који показује како можете да користите ове реквизите:
увоз Реаговати из"реаговати";
увоз { ФорматтедНумбер } из"реаговати-интл";функцијаАпликација() {
повратак (
вредност={123.4567}
минимумФрацтионДигитс={2}
макимумФрацтионДигитс={3}
/>
</p>
</div>
);
}
извозУобичајено Апликација;
Форматирање датума помоћу компоненте ФорматтедДате
Можете да форматирате датуме на начин који је доследан и лак за читање користећи Реацт Интл. Тхе ФорматтедДате компонента пружа једноставан и ефикасан начин за форматирање датума. Ради слично као библиотеке датума и времена које форматирају датуме, као што је Момент.јс.
Компонента ФорматтедДате узима много реквизита, као што је вредност, дан, месец дана, и године. Вредност пропс прихвата датум који желите да форматирате, а остали реквизити конфигуришу његово форматирање.
На пример:
увоз Реаговати из"реаговати";
увоз { ФорматтедДате } из"реаговати-интл";функцијаАпликација() {
конст данас = НоваДатум();повратак (
Данас'с датум је
вредност={данас}
дан="нумерички"
месец="дуго"
година="нумерички"
/>
</p>
</div>
);
}
извозУобичајено Апликација;
У овом примеру, вредност проп користи тренутни датум. Такође, коришћењем дан, месец дана, и године пропс, наведете да желите да се година, месец и дан приказују у дугом формату.
Поред дана, месеца и године, други реквизити такође форматирају изглед датума. Ево реквизита и вредности које прихватају:
- године: "нумерички", "2-цифрени"
- месец дана: "нумерички", "2-цифрени", "уски", "кратки", "дуги"
- дан: "нумерички", "2-цифрени"
- сат: "нумерички", "2-цифрени"
- минут: "нумерички", "2-цифрени"
- друго: "нумерички", "2-цифрени"
- тимеЗонеНаме: "кратка Дуго"
Такође можете користити ФорматтедДате компонента за форматирање и време приказа:
увоз Реаговати из"реаговати";
увоз { ФорматтедДате } из"реаговати-интл";функцијаАпликација() {
конст данас = НоваДатум();повратак (
Време је
вредност={данас}
сат="нумерички"
минуте="нумерички"
сецонд="нумерички"
/>
</p>
</div>
);
}
извозУобичајено Апликација;
Интернационализујте своје Реацт апликације за ширу публику
Научили сте како да инсталирате и подесите Реацт-Интл библиотеку у вашој Реацт апликацији. Реацт-интл олакшава форматирање бројева, датума и валута ваше Реацт апликације. Можете форматирати податке на основу корисничког локала користећи компоненте ФорматтедМессаге, ФорматтедНумбер и ФорматтедДате.
Реацт програмери често праве грешке које могу довести до озбиљних последица. На пример, неуспешно ажурирање стања. Важно је да будете свесни ових уобичајених грешака и да их исправите рано како бисте избегли скупе проблеме.