Javascript 在jsx中使用模板文本进行计算

为什么这样不行

<div style={{height: `${(2/1) %}` }}>
</div>

我希望身高能达到50%。我可以在jsx中这样做吗？但据我所知，

{}

中的任何内容都是javascript表达式。

基本规则：

只有js表达式需要放在

{}

中

---

问题是，

%

的位置是错误的，请这样写：

style={{ height: `${(2/1)}%` }}

它应该在

${}

之外，否则它将被视为，并在%之后期望另一个值。当您在

${}

之外定义它时，它将以百分比的形式工作

例如：

style= {`${value}%`}

更新：

要使用react定义样式，我们需要传递一个对象，键将是css属性，值将是它们的值，因此在您的情况下，您需要在

'

中放入蓝色

使用以下命令：

style={{height: `${1/2}%`, background: 'blue' }}

---

这行不通吗？高度仍然不起作用，这是我的尝试。你可以检查元素，样式根本没有添加。只是好奇为什么空间在这里很重要。因为它将变成

高度：“50%”

，并且它应该是

高度：“50%”

或

'50px'

数字和单位之间没有空格：）