css - 如何根据变量的输出在我的 React 网络应用程序中设置组件的宽度

Question

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

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

但是，尽管能够在组件内呈现结果，但我无法设置宽度。这是我之前第一次尝试有条件地渲染 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>