react父子组件通信?

在 React 中，父组件向子组件传递数据可以通过 props，而子组件向父组件传递数据则需要通过回调函数的方式。

下面是两种常见的父子组件通信方式：

1：父组件向子组件传递数据（Props）：

在父组件中，通过在子组件上设置属性（props）的方式将数据传递给子组件。

子组件通过 props 接收父组件传递的数据，并在渲染过程中使用这些数据。
示例代码：

// 父组件
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const data = 'Hello, child!';

  return (
    

      
    
  );
}

// 子组件
import React from 'react';

function ChildComponent(props) {
  const { data } = props;

  return 
{data}
;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

2：子组件向父组件传递数据（回调函数）：

在父组件中定义一个回调函数，并将该函数作为 props 传递给子组件。

子组件通过调用父组件传递的回调函数，并将需要传递的数据作为参数，来向父组件传递数据。

示例代码：