How to pass data from child component to parent component?

在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的数据流向（总是从父组件流向子组件）。这种方法有助于保持组件的独立性和复用性。