React js和Laravel Localization字符串？

Question

我最近开始尝试使用React js,我开始喜欢它.

有一个逻辑,我坚持.

我的网站是多语言的,我在渲染字符串时遇到问题.

所以我认为将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>

所以不是最好的主意.

有人能给我一个暗示吗？

Answer 1

您希望将翻译文件转换为JSON并使用客户端翻译功能.

例如,您生成的图像是这样的:

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

然后你可以像这样写trans:

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>