3

次のコードを AngularJS から React に移植しています。

<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 + "てとても読みにくいです。

それを行うより良い方法はありますか？

4

2 に答える 2

0

どうですか：

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);
}
于 2014-01-11T19:52:58.610 に答える
0

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 + "。

于 2014-01-10T08:03:32.810 に答える