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

Question

为什么这不起作用？

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

我希望身高达到50％。我可以在jsx中这样做吗？但据我所知，{}中的任何内容都是javascript表达式。

Answer 1

基本规则：

  

只有js表达式需要放在{}内。

问题是，%的放置是错误的，写成这样：

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

它应该在${}之外，否则会被视为 Remainder (%) ，并期望％之后的其他值。当您在${}之外定义它时，它将以百分比形式工作。

示例：

style= {`${value}%`}

<强>更新

要定义具有反应的样式，我们需要传递一个对象，键将是css属性，值将是它们的值，因此在您的情况下，您需要将蓝色放在''内。

使用此：

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