React Hooks 是 React 16.8 版本引入的新特性，它允许在不编写 class 组件的情况下使用 state 和其他 React 特性。Hooks 提供了一种更简洁直观的方式来编写函数组件并复用状态逻辑。

React Hook

在React中，将数据从子组件传递到父组件通常通过回调函数来实现。父组件会提供一个回调函数作为prop传递给子组件，然后子组件通过调用这个回调函数将数据传递回父组件。

这里是一个简单的例子来说明这个过程：

假设我们有一个父组件 `ParentComponent` 和一个子组件 `ChildComponent`。

### 父组件 (ParentComponent)

```jsx
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const [childData, setChildData] = useState('');

  const handleDataFromChild = (data) => {
    setChildData(data);
    console.log('Received data from child:', data);
  };

  return (
    <div>
      <h1>Parent Component</h1>
      <ChildComponent onData={handleDataFromChild} />
      <p>Data from Child: {childData}</p>
    </div>
  );
}

export default ParentComponent;
```

### 子组件 (ChildComponent)

```jsx
import React from 'react';

function ChildComponent({ onData }) {
  const sendDataToParent = () => {
    // 模拟一些数据
    const data = 'Hello from Child';
    onData(data);
  };

  return (
    <div>
      <h1>Child Component</h1>
      <button onClick={sendDataToParent}>Send Data to Parent</button>
    </div>
  );
}

export default ChildComponent;
```

在这个例子中：

1. `ParentComponent` 定义了一个状态 `childData` 和一个处理函数 `handleDataFromChild`。这个函数负责接收从子组件传来的数据，并将其保存在状态 `childData` 中。
2. `ParentComponent` 将 `handleDataFromChild` 函数作为prop (`onData`) 传递给 `ChildComponent`。
3. 在 `ChildComponent` 中，有一个按钮触发 `sendDataToParent` 函数，这个函数调用从props接收到的 `onData`，并传递一些数据给父组件。
4. 当数据被传递到父组件后，它被保存在 `childData` 状态中，父组件可以使用这个数据进行进一步的处理或展示。

使用这种模式，我们可以灵活地在组件之间传递数据，而不破坏React的数据流向（总是从父组件流向子组件）。这种方法有助于保持组件的独立性和复用性。

React Hook相关问题

How to pass data from child component to parent component?