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

6kkfgxo0  于 12个月前  发布在  React
关注(0)|答案(2)|浏览(101)

我有一个组件,我试图设置宽度的基础上的结果,一个变量。
该变量返回一个1到100之间的数字,因此我想设置宽度以反映变量的结果。
然而,尽管能够在组件中呈现结果,但我不能设置宽度。这是我第一次尝试有条件地呈现React组件的宽度,所以我认为我做了一些明显的错误。
下面是有问题的render函数:

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”的结果设置“width”。
我可以在div中呈现'loanSum',但不能使用宽度。
有谁能指出我哪里做错了吗?
谢谢你,谢谢

798qvoo8

798qvoo81#

你不应该在loanSum周围加上花括号,所以你的行应该是:

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

字符串

8aqjt8rx

8aqjt8rx2#

以%为单位设置值我就是这么做的

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

字符串

相关问题