React js和Laravel本地化字符串？

我最近開始放棄React js和im開始喜歡它。React js和Laravel本地化字符串？

有一個邏輯我堅持。

我的網站是多語言的，我在渲染字符串時遇到了問題。

所以我認爲是將data-translate屬性放在id或類上，但仍然不合適。

這是我的邏輯只是一個基本的例子

陣營JS

var counter = document.getElementById('counter').getAttribute('data-translate'); 

var Timer = React.createClass({ 


    getInitialState: function() { 
    return {secondsElapsed: 0}; 
    }, 
    tick: function() { 
    this.setState({secondsElapsed: this.state.secondsElapsed + 1}); 
    }, 
    componentDidMount: function() { 
    this.interval = setInterval(this.tick, 1000); 
    }, 
    componentWillUnmount: function() { 
    clearInterval(this.interval); 
    }, 
    render: function() { 
    return (
     <div className={this.translate}>{counter} {this.state.secondsElapsed}</div> 
    ); 
    } 
}); 



React.renderComponent(
    <Timer />, 
    document.getElementById('counter') 
);

HTML

<div id="counter" data-translate="{{ trans('stream.counter') }}"></div>

所以不是最好的主意。

有人能給我一個提示嗎？

來源

2014-09-27 Levente Nagy

您想將您的翻譯文件轉換爲JSON並使用客戶端翻譯功能。

例如，您生成的圖像是這樣的：

var translations = {"en":{"stream":{"counter":"counter"}}};

然後，您可以編寫反式是這樣的：

function trans(key){ 
    var keys = key.split("."); 
    var lang = navigator.language.split("-"); 
    return lang.concat(keys).reduce(function(o, k){ 
    var next = o[k]; 
    if (next) { 
     console.error('No translation found for ' + key, new Error().stack); 
     return {}; 
    } 
    else { 
     return next; 
    } 
    }, translations); 
}

而在你的組件，只需使用

<div>{trans('stream.counter')}</div>

來源

2014-09-27 10:41:13 FakeRainBrigand

This works great ...我需要改變'if（next）'到'if（！next）'雖然 – ysasaki 2015-09-05 21:40:06

像gettext這樣的API可以滿足您的需求。在應用程序初始化期間，您將設置一個詞典，其中源鍵是「fallback language」文本，並且是目標語言中的值。

// Data source initialised once, could be embedded in the source from the server. 
var TranslationDictionary = { 
    "the ticks": "les tiques", 
    ... 
}; 

// In the component: 
return <div>{gettext("the ticks")}</div>; 

// Then the gettext utility to join them together: 
function gettext(lookup) { 
    var translation = TranslationDictionary[lookup]; 
    if (translation) { 
     return translation; 
    } 
    else { 
     console.log("Warning: missing translation for: " + lookup); 
     return lookup; 
    } 
}

的gettext功能則非常簡單，而且由於鍵在回退語言全文，視圖代碼仍然是易於閱讀。獎勵積分，如果你寫一個代碼分析器，尋找丟失的翻譯。

來源

2014-09-27 22:12:18 Douglas

React js和Laravel本地化字符串？

回答

相關問題