Question

我正在尝试使用标签在svg窗口中放置旋转文本但旋转（90 100 70）不会使用{MyX}条目而不是数字100，下面是JSX的一小部分，带有一行这是有效的，而且是无效的。请注意，我在之前的属性中使用{MyX}，它的效果很好。为什么它可以在旋转中工作？

var w = 300
var h = 300
var MyX = 100
......
<svg width={w} height={h}>

//this line works if I put the x manually in the second parameter of rotate
<text x={MyX} y="70" stroke="black" transform="rotate(-90 100 70)">
    HELLO
</text> 

//this line gives this compile error shown below
<text x={MyX} y="70" stroke="black" transform="rotate(-90 {MyX} 70)">
    HELLO
</text> 

</svg>

//这是Chrome开发窗口中的错误 react-dom.development.js：11720错误：属性转换：预期＆＃39;）＆＃39;，＆＃34;旋转（-90 {MyX} 70）＆＃34;。

Answer 1

尝试使用：

transform={`rotate(-90 ${MyX} 70)`}

More about template literals

Answer 2

在JavaScript中，由单引号或双引号（'或"）包围的值是不支持内联插值的字符串。相反，您可以使用+ operator加入两个值，如下所示：

"rotate(-90 " + MyX + " 70)"

或使用template literals（`），如下所示：

`rotate(-90 ${MyX} 70)`

此外，如果值是JavaScript表达式而不是字符串，则必须使用JSX的curly brace syntax（prop={value}）。

总而言之，这可能是您想要实现的目标的实现方式：

<text x={MyX} y="70" stroke="black" transform={`rotate(-90 ${MyX} 70)`}>
    HELLO
</text>

svg文本旋转中的JSX变量{MyX}不起作用

2 个答案: