react动态修改样式。react中点击那个li 那个li加颜色和地边框

给动态li加样式 react中点击那个li 那个li加颜色和地边框

原理：写好一个特定样式，点击指定li时 给这个li添加一个类名 ,react中用三目做判断，动态添加类名

• 1、constructor中this.state中丢你个一isShow

        this.state={
            NavListTop:[
                {
                    text:"人气",
                    id:1
                },
                {
                    text:"最新",
                    id:2
                },
                {
                    text:"销量",
                    id:3
                },
                {
                    text:"价格",
                    id:4
                }
            ],
            sort:1,
            isShow:0
        }

• **2、给需要动态改变样式的导航添加类名和点击事件 并传入一个index,borderActive为添加的类名 **
  item.id,this.props.List_list,是我下面的数据会根据上边点 li 发生改变，只改变样式只需穿一个this和index即可

  {
     NavListTop.map((item,index)=>(
         <li key={item.id} 
             className={isShow===index?"borderActive":""}
             onClick={this.handClickNavList.bind(this,item.id,this.props.List_list,index)}
         >{item.text}</li>
     ))
 }

• 3、动态修改点击的元素的下标

    handClickNavList(id,list,index){
        this.setState({
            sort:id,
            isShow:index
        })
    }

• 4 特定样式

    .borderActive{
        border-bottom:.02rem solid #fe4a65;
        color: #fe4a65;
    }

在修改显示隐藏的时候出现问题 但不知原因，使用这个代码可以，下面那个不可，原因暂时不知

  <div style={{display:this.state.searchHouFlag?'block':'none'}}>
      <StyleObj.SearchHouText>
          {
              searchHouList?searchHouList.map((item,index)=>(
                  <li key={item.id}>{item.title}</li>
              )):[]
          }
      </StyleObj.SearchHouText>
  </div>

下面的代码快无效 修改样式使用上面的,暂时不知道原因 先放着

 <div className={this.state.searchHouFlag?'display_none':'display_block'}>