在React中使用.map()生成组件时，如何让一个组件与另一个组件通信？

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: "Hello, World!"
    };
  }

  render() {
    const children = ["Child 1", "Child 2", "Child 3"].map((child, index) => (
      <Child key={index} message={this.state.message} />
    ));

    return <div>{children}</div>;
  }
}

class Child extends React.Component {
  render() {
    return <div>{this.props.message}</div>;
  }
}

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: ""
    };
  }

  handleMessage = (message) => {
    this.setState({ message });
  };

  render() {
    const children = ["Child 1", "Child 2", "Child 3"].map((child, index) => (
      <Child key={index} onButtonClick={this.handleMessage} />
    ));

    return (
      <div>
        {children}
        <div>{this.state.message}</div>
      </div>
    );
  }
}

class Child extends React.Component {
  handleClick = () => {
    this.props.onButtonClick("Button clicked!");
  };

  render() {
    return <button onClick={this.handleClick}>Click me</button>;
  }
}