REACT_React动态绑定className,动态绑定样式

动态绑定className

绑定多个使用[ ],[ ]不是代表一个数组,[ ]内使用字符串拼接形式

字符串拼接形式

<i className={
    
    ["iconfont"+" "+item.icon]} ></i>

ES6 模板字符串

<p className={
    
    `title ${
      
      this.state.addColor?'color':null}`}>标题</p>

join(" ")

<p className={
    
    ['title',this.state.addColor?'color':null].join(' ')}>标题</p>

有判断条件的

<i className={
    
    ["iconfont ",this.state.isRed ?item.icon :'' ].join('')} ></i>

动态绑定样式

绑定多个使用“,”号隔开

<p style={
    
    {
    
    background:"red",color:this.state.color}}>标题</p>  

猜你喜欢

转载自blog.csdn.net/weixin_44599931/article/details/118567191