javascript - React js 和 Laravel 本地化字符串？

Question

我最近开始尝试 React js，我开始喜欢上它。

我坚持一种逻辑。

我的网站是多语言的，我在呈现字符串时遇到问题。

所以我的想法是将 data-translate 属性放置到 id 或类中，但仍然不合适。

这只是我的逻辑的一个基本示例

react 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>