如何在react中点击组件时创建相同类型的组件？

import React, { Component } from 'react';

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      childComponents: [],
    };
  }

  createChildComponent = () => {
    const { childComponents } = this.state;
    const newChildComponent = <ChildComponent />;
    this.setState({ childComponents: [...childComponents, newChildComponent] });
  }

  render() {
    const { childComponents } = this.state;
    return (
      <div>
        <button onClick={this.createChildComponent}>创建子组件</button>
        {childComponents.map((child, index) => (
          <div key={index}>{child}</div>
        ))}
      </div>
    );
  }
}

class ChildComponent extends Component {
  handleClick = () => {
    // 处理点击事件
  }

  render() {
    return (
      <div onClick={this.handleClick}>
        子组件
      </div>
    );
  }
}

export default ParentComponent;