React在線編輯國際化文本

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

在咱們的項目日益龐大的狀況下，國際化的字典愈變愈大，國際化文本的維護是一個問題；
有時候修改一個字段，查找就花費了很大的時間功夫。 這個時候 tiny-i18n 中的 @tiny-i18n/react-live 就能夠發揮它的力量了，能夠幫助咱們在線可視化修改、新增國際化字段。

效果

• 視頻效果：http://obu9je6ng.bkt.clouddn.com/Jietu20180622-102135-HD.mp4

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

體驗在線編輯

實現原理

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