在React中将数据从孙子节点传递到父节点

// 父组件
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const [data, setData] = useState('');

  const handleDataFromGrandchild = (grandchildData) => {
    setData(grandchildData);
  };

  return (
    <div>
      <ChildComponent onData={handleDataFromGrandchild} />
      <p>Data from grandchild: {data}</p>
    </div>
  );
};

export default ParentComponent;

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

const ChildComponent = ({ onData }) => {
  return (
    <div>
      <GrandchildComponent onData={onData} />
    </div>
  );
};

export default ChildComponent;

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

const GrandchildComponent = ({ onData }) => {
  const sendDataToParent = () => {
    const grandchildData = 'Hello from grandchild';
    onData(grandchildData);
  };

  return (
    <div>
      <button onClick={sendDataToParent}>Send data to parent</button>
    </div>
  );
};

export default GrandchildComponent;