react中style和className使用

最新推荐文章于 2025-06-20 18:05:54 发布

原创最新推荐文章于 2025-06-20 18:05:54 发布 · 4.8k 阅读

1 ·

CC 4.0 BY-SA版权

react 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了在React中使用style属性进行条件渲染的方法，包括如何根据状态改变元素的显示与隐藏，以及如何动态调整元素宽度。同时，还探讨了通过className属性结合条件表达式实现类名的动态切换，支持多个类名的组合使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

style用法

<div style={{display: this.state.btnFlag ? "block" : "none"}}>按钮</div>

// 多个用,隔开
<div style={{display: this.state.btnFlag ? "block" : "none",
width: '20px'}}>按钮</div>

className用法

<div className={this.state.btnFlag ? "btn-show" : "btn-hide"}>按钮</div>

// 含有多个class
<div className={`btn-default ${this.state.btnFlag ? "btn-show" : "btn-hide"} ${this.state.btnFlag2 ? "btn-primary" : "btn-drange"} `}>按钮</div>