React實現列表點擊某一項高亮顯示的實現2種思路和demo，其他語言也類似思想

實現1：選中列表的某行高亮顯示，之前我的實現思路是list[index].checked = ‘高亮’
實現2：設置selectKey,選中某行，就將 selectKey = index，再在渲染的列表判斷item.index === selectKey 如果相等，就高亮，否則就無效果
思路一、設置checked

import React from "react";

class Test extends React.Component {
  state = {
    list: [{id: 11}, {id: 12}, {id: 13}, {id: 14}]
  };


  handleCheckedItem = (index) => {
    const {list} = this.state;
    list[index].checked = true;

    let _list = list.map((item,num)=>({
      ...item,
      checked:num===index?true:false
    }))
    this.setState({
      list:_list
    });
  }

  render() {
    const {list} = this.state;
    return (
      <ul>
        { list.map((item, index) => {
          return <li onClick={ () => this.handleCheckedItem(index) }
                     style={ {color: item.checked ? 'red' : 'black'} }>項目{ index }</li>
        }) }
      </ul>
    );
  }
}

export default Test

• 思路二、設置selectKey

import React from "react";

class Test extends React.Component {
  state = {
    selectKey:''
  };
  
  handleCheckedItem = ({id}) => {
    this.setState({
      selectKey:id
    })
  }

  render() {
    const { selectKey } = this.state;
    return (
      <ul>
        {[{id:11},{id:12},{id:13},{id:14}].map((item,index)=>{
          return <li onClick={()=>this.handleCheckedItem(item)} style={{color:selectKey===item.id?'red':'black'}}>項目{index}</li>
        })}
      </ul>
    );
  }
}

export default Test