在React中高亮显示和取消高亮显示onClick上的div

在React中，要实现高亮显示和取消高亮显示onClick事件的div，可以通过以下步骤来完成：

首先，创建一个React组件，可以命名为HighlightDiv，用于包裹需要高亮显示的div。
在HighlightDiv组件的构造函数中，初始化一个状态变量，例如highlighted，用于记录当前div是否被高亮显示。
在render方法中，根据highlighted状态变量的值，为div添加不同的样式类，以实现高亮显示效果。
在div的onClick事件处理函数中，通过调用setState方法，更新highlighted状态变量的值，从而实现高亮显示和取消高亮显示的切换。

下面是一个示例代码：

import React, { Component } from 'react';

class HighlightDiv extends Component {
  constructor(props) {
    super(props);
    this.state = {
      highlighted: false
    };
  }

  handleClick = () => {
    this.setState(prevState => ({
      highlighted: !prevState.highlighted
    }));
  }

  render() {
    const { highlighted } = this.state;
    const divClassName = highlighted ? 'highlighted' : '';

    return (
      <div className={divClassName} onClick={this.handleClick}>
        {/* 内容 */}
      </div>
    );
  }
}

export default HighlightDiv;

在上述代码中，我们通过highlighted状态变量来控制div的样式类，当highlighted为true时，为div添加highlighted样式类，实现高亮显示；当highlighted为false时，不添加样式类，取消高亮显示。

你可以根据自己的需求，自定义highlighted样式类的样式，以实现你想要的高亮显示效果。

此外，如果你想了解更多关于React的知识和使用方法，可以参考腾讯云的React产品介绍页面：React产品介绍。