React升职记 ----- 三目运算符实现react动态绑定class和style

1.react动态绑定class为对象形式

如：

	this.props.asideList.map(item=>(
        <li className={ this.state.curId === item.id?'active':'asideItem'}
             onClick={(e) => this.getId(e,item.id)} 
             key={item.id}>
             {item.name}
         </li>
     ))

满足条件的class才能生效。

同时满足多个条件的如下：

this.props.asideList.map(item=>(
    <li className={ this.state.curId === item.id?'active':'asideItem default'}
        onClick={(e) => this.getId(e,item.id)} 
        key={item.id}>
        {item.name}
    </li>
))

2.动态绑定style和绑定class大致一样，也是对象语法形式，也是满足条件的才生效

例：

this.props.asideList.map(item=>(
    <li className={ this.state.curId === item.id?'active':'asideItem default'}
        style={this.state.curId === item.id?{fontSize:'20px'}:{fontSize:'12px'}}
        onClick={(e) => this.getId(e,item.id)} 
        key={item.id}>
        {item.name}
    </li>
))