react动态添加样式：style和className

最新推荐文章于 2025-05-06 15:11:41 发布

原创最新推荐文章于 2025-05-06 15:11:41 发布 · 1w 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

React相关专栏收录该内容

37 篇文章

订阅专栏

本文介绍了在React中如何动态地向元素添加style和className，包括根据状态展示元素和切换选中状态。同时展示了如何通过鼠标事件（onMouseOver和onMouseLeave）控制组件显示和隐藏，例如在鼠标悬停时显示弹框，离开时隐藏。内容涵盖了条件渲染、样式绑定和事件处理等React核心概念。

一、react向元素内，动态添加style

例如：有一个DIV元素，需要动态添加一个 display:block | none 样式，那么：<div style={{display: (index=this.state.currentIndex) ? “block” : “none”}}>此标签是否隐藏或者，多个样式写法：<div style={{display: (index=this.state.currentIndex) ? “block” : “none”, color:“red”}}>此标签是否隐藏

二、react向元素内，动态添加className

比如：
1、DIV标签中，没有其他class，只需要动态添加一个.active的className，来显示内容是否被选中状态，则：<div className={index=this.state.currentIndex?“active”:null}>此标签是否选中
2、如果DIV标签本身有其他class，又要动态添加一个.active的className，来显示内容是否被选中状态，则：<div className={[“container tab”,index=this.state.currentIndex?“active”:null].join(’ ')}>此标签是否选中
或者，使用ES6写法（推荐使用ES6写法）：<div className={container tab ${index===this.state.currentIndex?"active":null}}>此标签是否选中

例如使用样式绑定，鼠标经过显示弹框

在这里插入图片描述

点击项

 const [comData, setcomData] = useState({
    showList:false,//菜单栏显示
    name:"就放假放假放假",//菜单栏显示

  });
let  handleMenu = (val)=>{
    if(val){
      setcomData({
        showList:true
      })
    }else {
      setcomData({
        showList:false
      })
    }

  }


<div className="category-list-box">
    {
      categoryArray.map((item, index) => {
        return <div className="category-item" onMouseOver={()=>handleMenu(true)} onMouseLeave={()=>handleMenu(false)}>
          <div className="category-itemBox">
            <div className="category-item-left">{item.name}</div>
            <div className="category-item-right">》</div>
          </div>
        </div>;
      })
    }
  </div>

弹框

<div className="category-right" style={{display:(comData.showList == true)?'block':'none'}}>
 <div className="category-right-list">
   <div className="category-right-list-box">

     {
       shopGoodDatas.map(item =>{
         return  <div className="category-right-list-box-item">
           <div className="category-right-list-item-img">
             <img className="category-right-list-item-imgStyle"
                  src={shopGoodImg} alt=""/>
           </div>
           <div className="category-right-list-item-name">{comData.name}</div>
         </div>
       })
     }
   </div>

 </div>
</div>