一、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>
复制