React Typescript如何在子组件中发送道具和使用道具

// ChildComponent.tsx
import React from 'react';

interface ChildProps {
  onSendData: (data: any) => void; // 定义回调函数prop
}

const ChildComponent: React.FC<ChildProps> = ({ onSendData }) => {
  const sendDataToParent = () => {
    const data = 'Hello from child';
    onSendData(data); // 调用回调函数发送数据
  };

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

export default ChildComponent;

// ParentComponent.tsx
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent: React.FC = () => {
  const [receivedData, setReceivedData] = useState<string | null>(null);

  const handleDataFromChild = (data: string) => {
    setReceivedData(data);
  };

  return (
    <div>
      <ChildComponent onSendData={handleDataFromChild} />
      {receivedData && <p>Received data: {receivedData}</p>}
    </div>
  );
};

export default ParentComponent;

// ParentComponent.tsx
import React from 'react';
import ChildComponent from './ChildComponent';

interface ParentProps {
  // 父组件可能有的其他props
}

const ParentComponent: React.FC<ParentProps> = (props) => {
  const dataToChild = 'Hello from parent';

  return (
    <div>
      <ChildComponent dataFromParent={dataToChild} />
    </div>
  );
};

export default ParentComponent;

// ChildComponent.tsx
import React from 'react';

interface ChildProps {
  dataFromParent: string; // 定义接收父组件数据的prop
}

const ChildComponent: React.FC<ChildProps> = ({ dataFromParent }) => {
  return (
    <p>{dataFromParent}</p>
  );
};

export default ChildComponent;