JSX模板文本用于内联样式
JSX模板文本用于内联样式
提问于 2020-05-29 17:54:58
我试图在包含变量的元素上添加内联样式。
对值进行硬编码是有效的：
<circle style={{ strokeDasharray: "75, 25" }} ></circle>但我需要一种方法，让这两个数字在这种风格下，从变量中提取出来。
我尝试过各种花括号和背字形--我想我需要模板文字，但不确定这种内联样式似乎需要的双大括号内的语法是如何工作的。
这一个
<circle style={`{strokeDasharray: "${ percent }, 25"}`} ></circle>消息失败：style支柱需要从样式属性到值的映射，而不是字符串。例如，在使用JSX时使用style={{marginRight: spacing + 'em'}}。
这一个
<circle style={{`strokeDasharray: "${ percent }, 25"`}} ></circle>导致构建完全失败。
这一个
<circle style={{strokeDasharray: "`${ percent }`, 25"}} ></circle>生成，但根本不添加内联样式。
除了对第一个数值使用percent变量之外，我还需要计算第二个数值--它总是100减去percent变量。
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-05-29 18:00:46
这里的关键是外部{}中的代码是纯JavaScript代码(具体来说，是表达式而不是语句)。使用style属性，可以指定一个对象：
<circle style={yourObjectHere} />在您的示例中，您将指定一个对象文本，就像JavaScript中的任何其他对象文本一样。因此，您有属性名称、冒号和属性值。由于值的一部分来自变量，所以您可以使用通常的方法来创建连接字符串：
<circle style={{strokeDasharray: percent + ", 25"}} />或
<circle style={{strokeDasharray: `${percent}, 25`}} />等。
(如果您想知道为什么我使用/>而不是></circle>__，那是因为在JSX中，即使是非空元素也通常是自封闭的。JSX并不完全是SVG或HTML，甚至是XHTML，它是自己的猛兽。)
您可能也想要计算第二个数字，如Михаил Мишин shows，所以对于上面的内容是：
<circle style={{strokeDasharray: percent + ", " + (100 - percent)}} />或
<circle style={{strokeDasharray: `${percent}, ${100 - percent}`}} />Stack Overflow用户
发布于 2020-05-29 17:56:53
style={{strokeDasharray: `${percent},${100 - percent}`}}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62091953
复制相关文章
相似问题
腾讯云开发者
