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本地化字符串？

回答

相关问题