当前位置: 首页 > 面试题库 >

在React中将State属性添加到内联样式

胡彭亮
2023-03-14
问题内容

我有一个具有以下内联样式的react元素:(精简版)

      <div className='progress-bar'
           role='progressbar'
           style={{width: '30%'}}>
      </div>

尽管我不太确定如何执行此操作,但我想用状态中的属性替换宽度。

我试过了:

      <div className='progress-bar'
           role='progressbar'
           style={{{width: this.state.percentage}}}>
      </div>

这有可能吗?


问题答案:

你可以这样

style={ { width: `${ this.state.percentage }%` } }

Example



 类似资料:
  • 问题内容: 我正在将webpack与css-loader一起使用以加载我的css样式并将其添加到React组件中。 我正在动态计算单元格的高度/宽度。在这里,他们描述了如何动态地向组件添加样式,但是我更喜欢在没有样式属性的情况下进行。 我尝试在其中一个父组件中执行此操作,以为它可能会更改css类,但这似乎不起作用。 有关如何最好地做到这一点的任何反馈? 问题答案: 您应该使用style属性,这就是

  • 我想在我的< code >上添加属性 似乎路线路径确实与问号混淆了。如果我把它换成其他东西,比如一个符号戳,它就会“起作用”。然而,这不是我想要的格式。我想要常规的<代码> 我找不到关于如何使这样的东西工作的文档。我看到了一些关于url的部分的东西,但我不太理解它。 谢谢你的所有帮助

  • 问题内容: 我正在尝试将此代码添加到动态创建的div元素中 创建动态的代码是 我的想法是在之后添加样式,但我不知道该怎么做。 问题答案: 这应该向元素添加内联样式。

  • 我想在gradle.properties文件中添加ndk.abifilters属性。现在我有了这栋楼里的房子。这是我建筑的一部分 这是我的gradle.properties文件的一部分

  • 我到处找,找不到我问题的答案。所以我想要一个只在特定条件下显示的条件属性,例如: 如您所见,我只想在等于默认值时指示按钮处于活动状态。然而,我得到了意想不到的令牌,错误... 但当我尝试将属性放在前面时,例如: 它传递语法错误并显示良好,但这不是我想要实现的。 我怎样才能解决这个问题?它没有通过的原因是什么? 因此,我刚刚发现在中,属性是的缩写,因此我使用 所以如果有人遇到这个问题,我就把它留在这

  • 全部显示 State 属性应用于 CommandBarButton 对象的情形。 返回或设置命令栏按钮控件的外观。MsoButtonState 类型,可读写。MsoButtonState 可以为下列 MsoButtonState 常量之一。msoButtonDownmsoButtonMixedmsoButtonUp expression.State expression 必需。该表达式返回一个 C