React.js：傳遞值中的屬性

Question

我移植從AngularJS下面的代碼陣營：

<div style="translate: translate({x}px, {y}px) scale({scale}) rotate({angle}deg)"}></div> 

我想：

<div style="translate: translate({this.state.x}px, {this.state.y}px) scale({this.state.scale}) rotate({this.state.angle}deg)"}></div> 

它失敗，Parse Error: Line X: Unexpected token }。

我想出的最好的是：

<div style={{transform: "translate(" + this.state.x + "px, " + this.state.y + "px) \ 
    scale(" + this.state.scale + ") \ 
    rotate(" + this.state.angle + "deg)"}}></div> 

這是一個很大的" + this.state.XXX + "，這是非常難以閱讀。

有沒有更好的方法呢？

Answer 1

我想出了AngularJS風格的微模板功能。用例：

<div style={this.evalTpl("translate: translate({{x}}px, {{y}}px) scale({{scale}}) rotate({{angle}}deg)")}></div> 

實施：

evalTpl: function(str) { 
    var state = this.state; 
    return str.replace(/{{.+?}}/g, function(name) { 
     name = name.slice(2, -2).trim(); 
     var value = state[name]; 
     if (typeof value === 'undefined' || value === null || (!value && isNaN(value))) { 
      throw new Error('this.state[' + JSON.stringify(name) + '] is ' + value); 
     } 
     return value; 
    }); 
} 

它不是整體很不錯的解決辦法，但是，我認爲，它比" + this.state.XXX + "更好。

Answer 2

如何：

format = function(format) { 
    var args = Array.prototype.slice.call(arguments, 1); 
    return format.replace(/{(\d+)}/g, function(match, number) { 
     return typeof args[number] != 'undefined' 
     ? args[number] 
     : match 
     ; 
    }); 
}; 

然後

<div style={{transform: this.getTransform()}}></div> 
[...] 
getTransform: function() { 
    var s = this.state; 
    return format("translate({0}px, {1}px) scale({2}) rotate({3}deg)", 
      s.x, s.y, s.scale, s.angle); 
}