如何将数据从一个组件发送到另一个非子组件/父组件以显示消息(闪烁消息)

// 消息组件
class MessageComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: ""
    };
  }

  render() {
    return (
      <div>
        {this.state.message && <p>{this.state.message}</p>}
      </div>
    );
  }
}

// 发送消息的组件
class SenderComponent extends React.Component {
  sendMessage = () => {
    const message = "Hello, World!"; // 要发送的消息内容
    this.props.onMessageSent(message); // 调用父组件传递的回调函数发送消息
  }

  render() {
    return (
      <div>
        <button onClick={this.sendMessage}>发送消息</button>
      </div>
    );
  }
}

// 接收消息的组件
class ReceiverComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: ""
    };
  }

  handleMessage = (message) => {
    this.setState({ message }); // 存储接收到的消息数据
  }

  render() {
    return (
      <div>
        <MessageComponent message={this.state.message} />
        <SenderComponent onMessageSent={this.handleMessage} />
      </div>
    );
  }
}

// 在父组件中使用接收消息的组件
class ParentComponent extends React.Component {
  render() {
    return (
      <div>
        <ReceiverComponent />
      </div>
    );
  }
}

ReactDOM.render(<ParentComponent />, document.getElementById("root"));