image.png

項(xiàng)目中突然要加個(gè)簡(jiǎn)體和繁體的字體切換弧械，搜了半天只看到j(luò)s的态坦，然后我就弄到了react組件里面
1.先創(chuàng)建一個(gè)組件 我命名為T(mén)rans

export class Trans {
  constructor(zh_choose) {
    this.zh_choose = zh_choose;
    this.zh_default = 'n';
    // 簡(jiǎn)體繁體對(duì)照字表,可以自行替換
    this.zh_s =
      '關(guān)系骯襖礙愛(ài)皚藹礙愛(ài)翱襖奧壩罷擺敗頒辦絆幫綁鎊謗剝飽寶報(bào)鮑輩貝鋇狽備憊繃筆畢斃閉邊編貶變辯辮鱉癟瀕濱賓擯餅撥缽鉑駁卜補(bǔ)參蠶殘慚慘燦蒼艙倉(cāng)滄廁側(cè)冊(cè)測(cè)層詫攙摻蟬饞讒纏鏟產(chǎn)闡顫場(chǎng)嘗長(zhǎng)償腸廠暢鈔車(chē)徹塵陳襯撐稱(chēng)懲誠(chéng)騁癡遲馳恥齒熾沖蟲(chóng)寵疇躊籌綢丑櫥廚鋤雛礎(chǔ)儲(chǔ)觸處傳瘡闖創(chuàng)錘純綽辭詞賜聰蔥囪從叢湊竄錯(cuò)達(dá)帶貸擔(dān)單鄲撣膽憚?wù)Q彈當(dāng)擋黨蕩檔搗島禱導(dǎo)盜燈鄧敵滌遞締點(diǎn)墊電淀釣調(diào)迭諜疊釘頂錠訂?wèn)|動(dòng)棟凍斗犢獨(dú)讀賭鍍鍛斷緞兌隊(duì)對(duì)噸頓鈍奪鵝額訛惡餓兒爾餌貳發(fā)罰閥琺礬釩煩范販飯?jiān)L紡飛廢費(fèi)紛墳奮憤糞豐楓鋒風(fēng)瘋馮縫諷鳳膚輻撫輔賦復(fù)負(fù)訃婦縛該鈣蓋干趕稈贛岡剛鋼綱崗皋鎬擱鴿閣鉻個(gè)給龔宮鞏貢鉤溝構(gòu)購(gòu)夠蠱顧剮關(guān)觀館慣貫廣規(guī)硅歸龜閨軌詭柜貴劊輥滾鍋國(guó)過(guò)駭韓漢閡鶴賀橫轟鴻紅后壺護(hù)滬戶嘩華畫(huà)劃話懷壞歡環(huán)還緩換喚瘓煥渙黃謊揮輝毀賄穢會(huì)燴匯諱誨繪葷渾伙獲貨禍擊機(jī)積饑譏雞績(jī)緝極輯級(jí)擠幾薊劑濟(jì)計(jì)記際繼紀(jì)夾莢頰賈鉀價(jià)駕殲監(jiān)堅(jiān)箋間艱緘繭檢堿鹼揀撿簡(jiǎn)儉減薦檻鑒踐賤見(jiàn)鍵艦劍餞漸濺澗漿蔣槳獎(jiǎng)講醬膠澆驕嬌攪鉸矯僥腳餃繳絞轎較秸階節(jié)莖驚經(jīng)頸靜鏡徑痙競(jìng)凈糾廄舊駒舉據(jù)鋸懼劇鵑絹杰潔結(jié)誡屆緊錦僅謹(jǐn)進(jìn)晉燼盡勁荊覺(jué)決訣絕鈞軍駿開(kāi)凱顆殼課墾懇摳庫(kù)褲夸塊儈寬礦曠況虧巋窺饋潰擴(kuò)闊蠟臘萊來(lái)賴(lài)藍(lán)欄攔籃闌蘭瀾讕攬覽懶纜爛濫撈勞澇樂(lè)鐳壘類(lèi)淚籬離里鯉禮麗厲勵(lì)礫歷瀝隸倆聯(lián)蓮連鐮?wèi)z漣簾斂臉鏈戀煉練糧涼兩輛諒療遼鐐獵臨鄰鱗凜賃齡鈴凌靈嶺領(lǐng)餾劉龍聾嚨籠壟攏隴樓婁摟簍蘆盧顱廬爐擄鹵虜魯賂祿錄陸驢呂鋁侶屢縷慮濾綠巒攣孿灤亂掄輪倫侖淪綸論蘿羅邏鑼籮騾駱絡(luò)媽瑪碼螞馬罵嗎買(mǎi)麥賣(mài)邁脈瞞饅蠻滿謾貓錨鉚貿(mào)么霉沒(méi)鎂門(mén)悶們錳夢(mèng)謎彌覓綿緬廟滅憫閩鳴銘謬謀畝鈉納難撓腦惱鬧餒膩攆捻釀鳥(niǎo)聶嚙鑷鎳檸獰寧擰濘鈕紐膿濃農(nóng)瘧諾歐鷗毆嘔漚盤(pán)龐國(guó)愛(ài)賠噴鵬騙飄頻貧蘋(píng)憑評(píng)潑頗撲鋪樸譜臍齊騎豈啟氣棄訖牽扦釬鉛遷簽謙錢(qián)鉗潛淺譴塹槍嗆墻薔強(qiáng)搶鍬橋喬僑翹竅竊欽親輕氫傾頃請(qǐng)慶瓊窮趨區(qū)軀驅(qū)齲顴權(quán)勸卻鵲讓饒擾繞熱韌認(rèn)紉榮絨軟銳閏潤(rùn)灑薩鰓賽傘喪騷掃澀殺紗篩曬閃陜贍繕傷賞燒紹賒攝懾設(shè)紳審嬸腎滲聲繩勝圣師獅濕詩(shī)尸時(shí)蝕實(shí)識(shí)駛勢(shì)釋飾視試壽獸樞輸書(shū)贖屬術(shù)樹(shù)豎數(shù)帥雙誰(shuí)稅順說(shuō)碩爍絲飼聳慫頌訟誦擻蘇訴肅雖綏歲孫損筍縮瑣鎖獺撻抬攤貪癱灘壇譚談嘆湯燙濤絳騰謄銻題體屜條貼鐵廳聽(tīng)烴銅統(tǒng)頭圖涂團(tuán)頹蛻脫鴕馱駝橢洼襪彎灣頑萬(wàn)網(wǎng)韋違圍為濰維葦偉偽緯謂衛(wèi)溫聞紋穩(wěn)問(wèn)甕撾蝸渦窩嗚鎢烏誣無(wú)蕪吳塢霧務(wù)誤錫犧襲習(xí)銑戲細(xì)蝦轄峽俠狹廈锨鮮纖咸賢銜閑顯險(xiǎn)現(xiàn)獻(xiàn)縣餡羨憲線廂鑲鄉(xiāng)詳響項(xiàng)蕭銷(xiāo)曉嘯蝎協(xié)挾攜脅諧寫(xiě)瀉謝鋅釁興洶銹繡虛噓須許緒續(xù)軒懸選癬絢學(xué)勛詢尋馴訓(xùn)訊遜壓鴉鴨啞亞訝閹煙鹽嚴(yán)顏閻艷厭硯彥諺驗(yàn)鴦楊揚(yáng)瘍陽(yáng)癢養(yǎng)樣瑤搖堯遙窯謠藥爺頁(yè)業(yè)葉醫(yī)銥頤遺儀彝蟻藝億憶義詣議誼譯異繹蔭陰銀飲櫻嬰鷹應(yīng)纓瑩螢營(yíng)熒蠅穎喲擁傭癰踴詠涌?jī)?yōu)憂郵鈾猶游誘輿魚(yú)漁娛與嶼語(yǔ)吁御獄譽(yù)預(yù)馭鴛淵轅園員圓緣遠(yuǎn)愿約躍鑰岳粵悅閱云鄖勻隕運(yùn)蘊(yùn)醞暈韻雜災(zāi)載攢暫贊贓臟鑿棗灶責(zé)擇則澤賊贈(zèng)扎札軋鍘閘詐齋債氈盞斬輾嶄棧戰(zhàn)綻張漲帳賬脹趙蟄轍鍺這貞針偵診鎮(zhèn)陣掙睜猙幀鄭證織職執(zhí)紙摯擲幟質(zhì)鐘終種腫眾謅軸皺晝驟豬諸誅燭矚囑貯鑄筑駐專(zhuān)磚轉(zhuǎn)賺樁莊裝妝壯狀錐贅墜綴諄濁茲資漬蹤綜總縱鄒詛組鉆致鐘么為只兇準(zhǔn)啟板里靂余鏈泄';
    this.zh_t =
      '關(guān)係骯襖礙愛(ài)皚藹礙愛(ài)翺襖奧壩罷擺敗頒辦絆幫綁鎊謗剝飽寶報(bào)鮑輩貝鋇狽備憊繃筆畢斃閉邊編貶變辯辮鼈癟瀕濱賓擯餅撥缽鉑駁蔔補(bǔ)參蠶殘慚慘燦蒼艙倉(cāng)滄廁側(cè)冊(cè)測(cè)層詫攙摻蟬饞讒纏鏟産闡顫場(chǎng)嘗長(zhǎng)償腸廠暢鈔車(chē)徹塵陳襯撐稱(chēng)懲誠(chéng)騁癡遲馳恥齒熾沖蟲(chóng)寵疇躊籌綢醜櫥廚鋤雛礎(chǔ)儲(chǔ)觸處傳瘡闖創(chuàng)錘純綽辭詞賜聰蔥囪從叢湊竄錯(cuò)達(dá)帶貸擔(dān)單鄲撣膽憚?wù)Q彈當(dāng)擋黨蕩檔搗島禱導(dǎo)盜燈鄧敵滌遞締點(diǎn)墊電澱釣調(diào)疊諜疊釘頂錠訂?wèn)|動(dòng)棟凍鬥犢獨(dú)讀賭鍍鍛斷緞兌隊(duì)對(duì)噸頓鈍奪鵝額訛惡餓兒爾餌貳發(fā)罰閥琺礬釩煩範(fàn)販飯?jiān)L紡飛廢費(fèi)紛墳奮憤糞豐楓鋒風(fēng)瘋馮縫諷鳳膚輻撫輔賦複負(fù)訃婦縛該鈣蓋幹趕稈贛岡剛鋼綱崗臯鎬擱鴿閣鉻個(gè)給龔宮鞏貢鈎溝構(gòu)購(gòu)夠蠱顧剮關(guān)觀館慣貫廣規(guī)矽歸龜閨軌詭櫃貴劊輥滾鍋國(guó)過(guò)駭韓漢閡鶴賀橫轟鴻紅後壺護(hù)滬戶嘩華畫(huà)劃話懷壞歡環(huán)還緩換喚瘓煥渙黃謊揮輝毀賄穢會(huì)燴彙諱誨繪葷渾夥獲貨禍擊機(jī)積饑譏雞績(jī)緝極輯級(jí)擠幾薊劑濟(jì)計(jì)記際繼紀(jì)夾莢頰賈鉀價(jià)駕殲監(jiān)堅(jiān)箋間艱緘繭檢堿鹼揀撿簡(jiǎn)儉減薦檻鑒踐賤見(jiàn)鍵艦劍餞漸濺澗漿蔣槳獎(jiǎng)講醬膠澆驕嬌攪鉸矯僥腳餃繳絞轎較稭階節(jié)莖驚經(jīng)頸靜鏡徑痙競(jìng)淨(jìng)糾廄舊駒舉據(jù)鋸懼劇鵑絹傑潔結(jié)誡屆緊錦僅謹(jǐn)進(jìn)晉燼盡勁荊覺(jué)決訣絕鈞軍駿開(kāi)凱顆殼課墾懇摳庫(kù)褲誇塊儈寬礦曠況虧巋窺饋潰擴(kuò)闊蠟臘萊來(lái)賴(lài)藍(lán)欄攔籃闌蘭瀾讕攬覽懶纜爛濫撈勞澇樂(lè)鐳壘類(lèi)淚籬離裏鯉禮麗厲勵(lì)礫曆瀝隸倆聯(lián)蓮連鐮?wèi)z漣簾斂臉鏈戀煉練糧涼兩輛諒療遼鐐獵臨鄰鱗凜賃齡鈴淩靈嶺領(lǐng)餾劉龍聾嚨籠壟攏隴樓婁摟簍蘆盧顱廬爐擄鹵虜魯賂祿錄陸驢呂鋁侶屢縷慮濾綠巒攣孿灤亂掄輪倫侖淪綸論蘿羅邏鑼籮騾駱絡(luò)媽瑪碼螞馬罵嗎買(mǎi)麥賣(mài)邁脈瞞饅蠻滿謾貓錨鉚貿(mào)麼黴沒(méi)鎂門(mén)悶們錳夢(mèng)謎彌覓綿緬廟滅憫閩鳴銘謬謀畝鈉納難撓腦惱鬧餒膩攆撚釀鳥(niǎo)聶齧鑷鎳檸獰甯擰濘鈕紐膿濃農(nóng)瘧諾歐鷗毆嘔漚盤(pán)龐國(guó)愛(ài)賠噴鵬騙飄頻貧蘋(píng)憑評(píng)潑頗撲鋪樸譜臍齊騎豈啓氣棄訖牽扡釺鉛遷簽謙錢(qián)鉗潛淺譴塹槍嗆牆薔強(qiáng)搶鍬橋喬僑翹竅竊欽親輕氫傾頃請(qǐng)慶瓊窮趨區(qū)軀驅(qū)齲顴權(quán)勸卻鵲讓饒擾繞熱韌認(rèn)紉榮絨軟銳閏潤(rùn)灑薩鰓賽傘喪騷掃澀殺紗篩曬閃陝贍繕傷賞燒紹賒攝懾設(shè)紳審嬸腎滲聲繩勝聖師獅濕詩(shī)屍時(shí)蝕實(shí)識(shí)駛勢(shì)釋飾視試壽獸樞輸書(shū)贖屬術(shù)樹(shù)豎數(shù)帥雙誰(shuí)稅順說(shuō)碩爍絲飼聳慫頌訟誦擻蘇訴肅雖綏歲孫損筍縮瑣鎖獺撻擡攤貪癱灘壇譚談歎湯燙濤縧騰謄銻題體屜條貼鐵廳聽(tīng)烴銅統(tǒng)頭圖塗團(tuán)頹蛻脫鴕馱駝橢窪襪彎灣頑萬(wàn)網(wǎng)韋違圍爲(wèi)濰維葦偉僞緯謂衛(wèi)溫聞紋穩(wěn)問(wèn)甕撾蝸渦窩嗚鎢烏誣無(wú)蕪吳塢霧務(wù)誤錫犧襲習(xí)銑戲細(xì)蝦轄峽俠狹廈鍁鮮纖鹹賢銜閑顯險(xiǎn)現(xiàn)獻(xiàn)縣餡羨憲線廂鑲鄉(xiāng)詳響項(xiàng)蕭銷(xiāo)曉嘯蠍協(xié)挾攜脅諧寫(xiě)瀉謝鋅釁興洶鏽繡虛噓須許緒續(xù)軒懸選癬絢學(xué)勳詢尋馴訓(xùn)訊遜壓鴉鴨啞亞訝閹煙鹽嚴(yán)顔閻豔厭硯彥諺驗(yàn)鴦楊揚(yáng)瘍陽(yáng)癢養(yǎng)樣瑤搖堯遙窯謠藥爺頁(yè)業(yè)葉醫(yī)銥頤遺儀彜蟻藝億憶義詣議誼譯異繹蔭陰銀飲櫻嬰鷹應(yīng)纓瑩螢營(yíng)熒蠅穎喲擁傭癰踴詠湧優(yōu)憂郵鈾猶遊誘輿魚(yú)漁娛與嶼語(yǔ)籲禦獄譽(yù)預(yù)馭鴛淵轅園員圓緣遠(yuǎn)願(yuàn)約躍鑰嶽粵悅閱雲(yún)鄖勻隕運(yùn)蘊(yùn)醞暈韻雜災(zāi)載攢暫贊贓髒鑿棗竈責(zé)擇則澤賊贈(zèng)紮劄軋鍘閘詐齋債氈盞斬輾嶄棧戰(zhàn)綻張漲帳賬脹趙蟄轍鍺這貞針偵診鎮(zhèn)陣掙睜猙幀鄭證織職執(zhí)紙摯擲幟質(zhì)鍾終種腫衆(zhòng)謅軸皺晝驟豬諸誅燭矚囑貯鑄築駐專(zhuān)磚轉(zhuǎn)賺樁莊裝妝壯狀錐贅墜綴諄濁茲資漬蹤綜總縱鄒詛組鑽緻鐘麼為隻兇準(zhǔn)啟闆裡靂餘鍊洩';
    // 判斷瀏覽器語(yǔ)言的正則,ie為小寫(xiě),ff為大寫(xiě)
    this.zh_langReg_t = /^zh-tw|zh-hk$/i;
    this.zh_langReg_s = /^zh-cn$/i;

    this.zh_browserLang = ''; // 瀏覽器語(yǔ)言

    this.zh_autoLang_t = true; // 瀏覽器語(yǔ)言為繁體時(shí)自動(dòng)進(jìn)行操作
    this.zh_autoLang_s = false; // 瀏覽器語(yǔ)言為簡(jiǎn)體時(shí)自動(dòng)進(jìn)行操作

  }

  tran(zh_choose, zh_s, zh_t) {
    let s1;
    let s2;
    if (zh_choose === 't') {
      s1 = zh_s;
      s2 = zh_t;
    } else if (zh_choose === 's') {
      s1 = zh_t;
      s2 = zh_s;
    } else {
      return this;
    }
    let a = '';
    let c;
    let p;
    for (let i = 0; i < this.length; i++) {
      c = this.charAt(i);
      p = s1.indexOf(c);
      a += p < 0 ? c : s2.charAt(p);
    }
    return a;
  }
  zh_tranBody(obj) {
    // eslint-disable-next-line no-extend-native
    String.prototype.tran = this.tran
    let o = typeof obj === 'object' ? obj.childNodes : document.body.childNodes;
    let c;
    for (let i = 0; i < o.length; i++) {
      c = o.item(i);
      if ('||BR|HR|TEXTAREA|SCRIPT|'.indexOf('|' + c.tagName + '|') > 0) continue;
      if (c.title !== '' && c.title !== null && c.title) { c.title = c.title.tran(this.zh_choose, this.zh_s, this.zh_t) };
      if (c.alt !== '' && c.alt !== null && c.alt) c.alt = c.alt.tran(this.zh_choose, this.zh_s, this.zh_t);
      if (
        c.tagName === 'INPUT' &&
        c.value !== '' &&
        c.type !== 'text' &&
        c.type !== 'hidden' &&
        c.type !== 'password'
      )
        c.value = c.value.tran(this.zh_choose, this.zh_s, this.zh_t);
      if (c.nodeType === 3) {
        c.data = c.data.tran(this.zh_choose, this.zh_s, this.zh_t);
      } else {
        this.zh_tranBody(c);
      }
    }
  }
  zh_getLang() {
    if (!this.zh_autoLang_t && !this.zh_autoLang_s) return false;
    if (navigator.language) {
      this.zh_browserLang = navigator.language;
    } else if (navigator.browserLanguage) {
      this.zh_browserLang = navigator.browserLanguage;
    }
    if (this.zh_autoLang_t && this.zh_langReg_t.test(this.zh_browserLang)) {
      this.zh_choose = 't';
    } else if (this.zh_autoLang_s && this.zh_langReg_s.test(this.zh_browserLang)) {
      this.zh_choose = 's';
    }
    if (this.zh_choose === this.zh_default) return false;
    return true;
  }
  zh_init() {
    this.zh_getLang();
    this.zh_tranBody();
  }
}

export default Trans

2.我是在項(xiàng)目頭部有切換按鈕,其他代碼省略
2-1.先導(dǎo)入我剛才的簡(jiǎn)體繁體切換的組件

import { Trans } from './Trans'

2-2.設(shè)置一下初始化的值

const [language, setLanguage] = useState(localStorage.getItem('language') || 's')  // s簡(jiǎn)體 t繁體

2-3.按鈕選擇后展示的文字

image.png

image.png

 <span>
              {language === 's' ? '簡(jiǎn)' : '繁'}
</span>
<ul>
              <li id='s' className={language === 's' ? 'active' : ''} onClick={() => { setLanguage('s'); localStorage.setItem('language', 's') }}>簡(jiǎn)體</li>
              <li id='t' className={language === 't' ? 'active' : ''} onClick={() => { setLanguage('t'); localStorage.setItem('language', 't') }}>繁體</li>
 </ul>

3.調(diào)用組件,useRef和useEffect要在最上面import，代碼省略了哦

const pv = useRef(null);
  useEffect(() => {
    pv.current = new Trans(
      language
    );
    pv.current.zh_init();
  }, [language, pathname, search])

因?yàn)槭枪卷?xiàng)目凄杯，只截圖部分效果混卵，這個(gè)轉(zhuǎn)換是全文生效的哦

6db8fb4277ab4b9e9064c86f5d1f1694.gif