React中的跨组件通信

在React中，跨组件通信有几种常见的方式。每种方式适用于不同的场景，下面是几种常见的跨组件通信方法：

1. 通过父子组件传递 Props

父组件可以通过 props 将数据传递给子组件，子组件只能接收和使用这些数据。

父组件（Parent.js）：

import React from 'react';
import Child from './Child';

const Parent = () => {
  const message = 'Hello from Parent!';
  return <Child msg={message} />;
};

export default Parent;

子组件（Child.js）：

import React from 'react';

const Child = (props) => {
  return <div>{props.msg}</div>;
};

export default Child;

优点：

• 简单易用，适合父子组件之间的通信。
• 父组件控制数据流。

2. 通过回调函数实现父子组件通信

父组件可以将一个函数作为 props 传递给子组件，子组件通过调用这个函数来向父组件传递数据。

父组件（Parent.js）：

impor