思路：使用鼠標(biāo)移動(dòng)相關(guān)的函數(shù)onMouseEnter()、onMouseLeave()獲取并存儲(chǔ)當(dāng)前行id,再判斷當(dāng)前鼠標(biāo)懸停處所在的行id是否等于之前存儲(chǔ)的行id，等于就變色，不等于就取消變色。

• 效果如下

  
  
  image.png

• 主要代碼如下

class PromotersAgent extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      idx: "",
      listData:[]
    }
  }
  render() {
    return (
      <Fragment>
            <ul >
              {this.getListFunc()}
            </ul>
      </Fragment>
    )
  }

  handleMouseFunc = (currentId) => {
    return () => {
      this.setState({idx:currentId})
    }
  }
  getListFunc() {
    var dealMatchList = [];
     this.state.listData.map((item, index) => {
      var currentId = item.id;
      dealMatchList.push(
        <li
          onMouseEnter={this.handleMouseFunc(currentId)}
          onMouseLeave={this.handleMouseFunc(currentId)}
          style={{ background: this.state.idx == currentId ? '#f5f7fa' : '' }}
        >
        xxxx
        </li>);
    });
    return dealMatchList;
  }
}
export default PromotersAgent;