React js 和 Laravel 本地化字符串？

Posted 2023-03-14

【中文标题】React js 和 Laravel 本地化字符串？

【英文标题】：React js and Laravel Localization strings?

【发布时间】：2014-11-22 06:10:52

【问题描述】：

我最近开始尝试使用 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>

所以不是最好的主意。

有人可以给我一个提示吗？

【参考方案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>

【讨论】：

这很好用...不过我需要将if (next) 更改为if(!next)

【参考方案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 函数则非常简单，并且由于键是备用语言的全文，因此视图代码仍然易于阅读。如果您编写了一个查找缺失翻译的代码分析器，则可以加分。