如何在React中处理多个具有相同类名的组件的onClick事件？

import React from 'react';

class ParentComponent extends React.Component {
  handleClick(event) {
    const clickedComponent = event.target; // 获取触发事件的子组件
    // 根据子组件的类名或其他属性进行相应的操作
    console.log(`Clicked ${clickedComponent.className}`);
  }

  render() {
    // 渲染多个具有相同类名的子组件
    const components = ['Component1', 'Component2', 'Component3'];
    return (
      <div onClick={this.handleClick}>
        {components.map((component, index) => (
          <ChildComponent key={index} className="component" onClick={this.handleClick} />
        ))}
      </div>
    );
  }
}

class ChildComponent extends React.Component {
  render() {
    return <div className={this.props.className}></div>;
  }
}