React在線編輯國際化文本

Prasanta 發(fā)布于2019-08-22 18:12 / 2613人閱讀

摘要：效果視頻效果更新后，字典存儲至中體驗(yàn)在線編輯實(shí)現(xiàn)原理對轉(zhuǎn)換方法進(jìn)行包裝，轉(zhuǎn)換成包含特殊字符包裹的字符串同時對方法進(jìn)行包裝，檢測出包含特殊字符包裹的字符串，這時候就會被認(rèn)為是國際化的文本，這個時候再去注入一些而外的交互邏輯。

今天給大家介紹一個輕量但神奇的國際化庫tiny-i18n

在我們的項(xiàng)目日益龐大的情況下，國際化的字典愈變愈大，國際化文本的維護(hù)是一個問題；
有時候修改一個字段，查找就花費(fèi)了很大的時間功夫。
這個時候 tiny-i18n 中的 @tiny-i18n/react-live 就可以發(fā)揮它的力量了，可以幫助我們在線可視化修改、新增國際化字段。

效果

視頻效果：http://obu9je6ng.bkt.clouddn....

DEMO - 更新后，字典存儲至 localStorage 中

體驗(yàn)在線編輯

實(shí)現(xiàn)原理

對 i18n 轉(zhuǎn)換方法進(jìn)行包裝，轉(zhuǎn)換成包含特殊字符（包裹）的字符串；同時對 React.createElement 方法進(jìn)行包裝，檢測出包含特殊字符（包裹）的字符串，這時候就會被認(rèn)為是國際化的文本，這個時候再去注入一些而外的交互邏輯。

GPU云服務(wù)器云服務(wù)器文本編輯文本框編輯 python文本編輯 html文本框編輯

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/95614.html

相關(guān)文章

精讀《前端未來展望》

摘要：精讀前端可以從多個角度理解，比如規(guī)范框架語言社區(qū)場景以及整條研發(fā)鏈路。同是前端未來展望，不同的文章側(cè)重的格局不同，兩個標(biāo)題相同的文章內(nèi)容可能大相徑庭。作為使用者，現(xiàn)在和未來的主流可能都是微軟系，畢竟微軟在操作系統(tǒng)方面人才儲備和經(jīng)驗(yàn)積累很多。 1. 引言前端展望的文章越來越不好寫了，隨著前端發(fā)展的深入，需要擁有非常寬廣的視野與格局才能看清前端的未來。筆者根據(jù)自身經(jīng)驗(yàn)，結(jié)合下面幾篇文章...

MadPecker 2019-08-26 18:35 評論0 收藏0
前端資源分享-只為更好前端

摘要：一團(tuán)隊組織網(wǎng)站說明騰訊團(tuán)隊騰訊前端團(tuán)隊，代表作品，致力于前端技術(shù)的研究騰訊社交用戶體驗(yàn)設(shè)計，簡稱，騰訊設(shè)計團(tuán)隊網(wǎng)站騰訊用戶研究與體驗(yàn)設(shè)計部百度前端研發(fā)部出品淘寶前端團(tuán)隊用技術(shù)為體驗(yàn)提供無限可能凹凸實(shí)驗(yàn)室京東用戶體驗(yàn)設(shè)計部出品奇舞團(tuán)奇虎旗下前一、團(tuán)隊組織網(wǎng)站說明騰訊 AlloyTeam 團(tuán)隊騰訊Web前端團(tuán)隊，代表作品WebQQ，致力于前端技術(shù)的研究 ISUX 騰...

zxhaaa 2019-08-22 16:11 評論0 收藏0
前端資源分享-只為更好前端

摘要：一團(tuán)隊組織網(wǎng)站說明騰訊團(tuán)隊騰訊前端團(tuán)隊，代表作品，致力于前端技術(shù)的研究騰訊社交用戶體驗(yàn)設(shè)計，簡稱，騰訊設(shè)計團(tuán)隊網(wǎng)站騰訊用戶研究與體驗(yàn)設(shè)計部百度前端研發(fā)部出品淘寶前端團(tuán)隊用技術(shù)為體驗(yàn)提供無限可能凹凸實(shí)驗(yàn)室京東用戶體驗(yàn)設(shè)計部出品奇舞團(tuán)奇虎旗下前一、團(tuán)隊組織網(wǎng)站說明騰訊 AlloyTeam 團(tuán)隊騰訊Web前端團(tuán)隊，代表作品WebQQ，致力于前端技術(shù)的研究 ISUX 騰...

JouyPub 2019-08-02 10:10 評論0 收藏0
前端資源分享-只為更好前端

摘要：一團(tuán)隊組織網(wǎng)站說明騰訊團(tuán)隊騰訊前端團(tuán)隊，代表作品，致力于前端技術(shù)的研究騰訊社交用戶體驗(yàn)設(shè)計，簡稱，騰訊設(shè)計團(tuán)隊網(wǎng)站騰訊用戶研究與體驗(yàn)設(shè)計部百度前端研發(fā)部出品淘寶前端團(tuán)隊用技術(shù)為體驗(yàn)提供無限可能凹凸實(shí)驗(yàn)室京東用戶體驗(yàn)設(shè)計部出品奇舞團(tuán)奇虎旗下前一、團(tuán)隊組織網(wǎng)站說明騰訊 AlloyTeam 團(tuán)隊騰訊Web前端團(tuán)隊，代表作品WebQQ，致力于前端技術(shù)的研究 ISUX 騰...

vslam 2019-08-30 15:53 評論0 收藏0
javascript功能插件大集合，寫前端的親們記得收藏

摘要：一個專注于瀏覽器端和兼容的包管理器。一個整合和的最佳思想，使開發(fā)者能快速方便地組織和編寫前端代碼的下一代包管理器。完全插件化的工具，能在中識別和記錄模式。健壯的優(yōu)雅且功能豐富的模板引擎。完整的經(jīng)過充分測試和記錄數(shù)據(jù)結(jié)構(gòu)的庫。【導(dǎo)讀】：GitHub 上有一個 Awesome – XXX 系列的資源整理。awesome-javascript 是 sorrycc 發(fā)起維護(hù)的 JS 資源列表...

cfanr 2019-08-20 10:34 評論0 收藏0