是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"}}};

然后您可以像这样写反式：

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>

Answer 2

[gettext之类的API将满足您的需求。在应用程序初始化期间，您将设置一个字典，其源键为“后备语言”文本，并使用目标语言中的值。

// 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函数非常简单，并且由于键是后备语言中的全文，因此视图代码仍然易于阅读。如果您编写代码分析器来寻找丢失的翻译，则可得到加分。