react hooks TS 组件传值 模板写法（基础版本）

父组件：

    //父组件向子组件传值
    //父组件
    // ParentComponent.tsx
    import React, { useState } from 'react';
    import ChildComponent from './ChildComponent';

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

        //子组件调用onData这个函数方法，实现子组件向父组件传值
        const handleDataFromChild = (newData: string) => {
            console.log('Received data:', newData);
            setData(newData);
        };

        return <ChildComponent data={data} onData={handleDataFromChild} />;
    };

    export default ParentComponent;

子组件：

    // 子组件
    // IChildProps.ts

    //直接通过props方法进行组件传值，获取父组件的值
    export interface IChildProps {
        data: string;
        onData: (data: string) => void;
    }

    // ChildComponent.tsx
    import React from 'react';
    import { IChildProps } from './IChildProps';

    const ChildComponent: React.FC<IChildProps> = ({ data, onData }) => {
        return (
            <div>
                <p>{data}</p>
                <button onClick={() => onData('New Data from Child')}>Send Data to Parent</button>
            </div>
        );
        // 子组件调用父组件的onData方法。
    };

    export default ChildComponent;