我有一个多语言reactjs应用程序,我希望在更改语言时有一个标志图标与语言代码相匹配,如何做到这一点而无需手动上传每个标志?
您可以尝试使用一些库,例如country-flag-icons。
import * as Flags from 'country-flag-icons/react/3x2'
const Flag = Flags[value];
<Flag title={value} className="..."/>
纯JS——无外部库
function countryCodeToFlag(countryCode) {
// Validate the input to be exactly two characters long and all alphabetic
if (!countryCode || countryCode.length !== 2 || !/^[a-zA-Z]+$/.test(countryCode)) {
return '🏳️'; // White Flag Emoji for unknown or invalid country codes
}
// Convert the country code to uppercase to match the regional indicator symbols
const code = countryCode.toUpperCase();
// Calculate the offset for the regional indicator symbols
const offset = 127397;
// Convert each letter in the country code to its corresponding regional indicator symbol
const flag = Array.from(code).map(letter => String.fromCodePoint(letter.charCodeAt(0) + offset)).join('');
return flag;
}
// Example usage:
console.log(countryCodeToFlag('us')); // Outputs: 🇺🇸
console.log(countryCodeToFlag('de')); // Outputs: 🇩🇪
console.log(countryCodeToFlag('fr')); // Outputs: 🇫🇷
countryCodeToFlag 函数将两个字母的国家/地区代码(例如美国的“US”或德国的“DE”)转换为该国家/地区的表情符号标志。以下是其工作原理的简单步骤:
在计算机编码系统 (Unicode) 中,每个字母都有一个与之关联的数字。例如,“A”是 65,“B”是 66,依此类推。 Unicode 中还有一个区域指示符号的起始点,即字母“A”的起始点是 127462。这就是函数中“偏移”值 127397 的来源 (127462 - 65 = 127397)。为了获取每个字母的区域指示符符号,该函数将此偏移量添加到该字母的 Unicode 编号中。因此,对于“U”(Unicode 中为 85),添加偏移量即可得到区域指示符“🇺”的 Unicode 编号,类似地,“S”可得到“🇸”。
组合符号:转换两个字母后,该函数将它们组合起来形成旗帜表情符号。对于“US”,它将“🇺”和“🇸”组合成“🇺🇸”。
注意,除非浏览器是 Firefox,否则 Windows 仅将标志 unicode 字符显示为两个字母(请参阅文章),因此为了覆盖 Windows 和任何浏览器,请使用库。下面的示例使用 emoji.css。示例中注释了详细信息。
/**
* This will change the class of a given element to that of a given
* two letter country code. emoji.css must be loaded and the classList
* of the element must include "em" and "em-flag-[country code]"
* @param {string} selector - CSS selector of element
* @param {string} country - Two letter country code
*/
function setFlag(selector, country) {
// Reference the element
const tag = document.querySelector(selector);
/* If country is two letters return it in lower case, otherwise
* return the last two letters of the browser default language.
*/
const cty = /[A-Za-z]{2}/.test(country) ? country.toLowerCase() : navigator.language.slice(-2).toLowerCase();
// Remove "em-flag-..." from classList.
tag.className = tag.className.replace(/em-flag-\w{2}/g, "");
// Add "em-flag-[cty]" to classList
tag.classList.add(`em-flag-${cty}`);
}
// For demonstration purposes
document.querySelector("input").oninput = e => {
setFlag(".em", e.target.value);
}
<!--| Flag Icons
This stylesheet provides the flag icons.
For details, go to:
https://afeld.github.io/emoji-css/
-->
<link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
<label>Enter a two letter Country Code:
<input style="display:inline-block;width:2ch;text-align:center">
</label>
<i class="em"></i>