如何根据变量的输出设置 React Web 应用程序中组件的宽度

Question

我有一个组件，我试图根据变量的结果设置其宽度。

该变量返回 1 到 100 之间的数字，因此我想设置宽度以反映变量的结果。

但是，尽管能够在组件内渲染结果，但我无法设置宽度。这是我第一次尝试有条件地渲染 React 组件的宽度，所以我认为我做了一些明显错误的事情。

这是有问题的渲染函数：

const fetchLoans = this.state.debts.map(debt => {

      const loanBalance = debt.balance
      const loanBorrowed = debt.borrowed
      const loanSum = Math.round(loanBalance / loanBorrowed * 100)

      return (<div className="individual-loan-amount-outstanding" key={debt._id}>

        <div className="individual-loan-amount-bar">

          <div className="individual-loan-amount-indicator" style={{ width: {loanSum} }}>{loanSum}%</div>

        </div>
        </div>
      )
    })

正如您希望看到的那样，我正在尝试根据“loanSum”的结果设置“宽度”。

我可以在 div 中渲染“loanSum”，但不能使用宽度。

谁能指出我哪里出错了？

谢谢！

Answer 1

您不应该将大括号放在 周围loanSum，因此您的行应该是：

<div className="individual-loan-amount-indicator" style={{ width: loanSum }}>{loanSum}%</div>