react-动态声明类名和动态设置内联样式

最新推荐文章于 2025-04-01 15:09:09 发布

我坑我承认

最新推荐文章于 2025-04-01 15:09:09 发布

阅读量1.2k

点赞数

本文链接：https://blog.youkuaiyun.com/qq_38262910/article/details/91905377

版权

本文探讨了在前端开发中如何使用动态类名和内联样式实现导航条的激活状态切换及表格中价格列的条件渲染，确保空值与非空值的不同视觉表现。

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

需求

1.有一列导航条，我们需要根据当前点击的导航来设置样式。

2。表格中有价格一列，价格为空时显示为-，不为空时显示价格，但是价格是红色，如下

当金额小记为空时，显示的时黑色的'-'，有价格时应当显示红色，

实现

1.动态设置类名：

可以通过es的模版字符串实现动态设置类名

handle = (index) => {
   this.setState({
     current: index
   })

}

let list = [1,2,3];
list.map((item, index) => {
  return (
    <div className={{`${current === index?: 'active': ''}`}} onClick= 
 {this.handle.bind(this, index)}>
  )
})

2.动态设置内联样式

const priceStyle = {color: '#d44',fontWeight: 600}
<span key='sumprice' style={record.amount && record.amount!=null ? priceStyle:''}>
   {(record.amount==''||record.amount==null)?'-':`¥${record.amount}`}
</span>  

//需要注意，这里的priceStyle是一个对象