react.js : 속성 내부 값을 전달합니다
-
21-12-2019 - |
문제
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 + "
가 많이 있으며 읽기가 매우 어렵습니다.
더 좋은 방법이 있습니까?
해결책
나는 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 + "
보다 낫다고 생각합니다.
다른 팁
어떨까요?
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);
}
. 제휴하지 않습니다 StackOverflow