React中的父子组件通讯：通过Props传递参数并实现方法回调

组件结构

• 子组件：SubTitle 是一个函数式组件（Functional Component），它接收一个名为 IProps 的props对象作为参数。这个对象包含了三个属性：title（必须），other（可选，类型为字符串或undefined），以及 onClickOther（可选，类型为函数，当点击时触发）。

• 父组件：Father 也是一个函数式组件，它定义了一个名为 clickOther 的函数，该函数在控制台输出一条消息。然后，Father 组件在渲染时创建了一个 SubTitle 组件的实例，并通过props将 title、other 字符串和 clickOther 函数传递给 SubTitle 组件。

interface IProps {
    title: string;
    other?: string | undefined;
    onClickOther?: () => void; //添加一个回调函数prop
}

const SubTitle: React.FC<IProps> = ({ title, other, onClickOther }) => {
    const handleOtherClick = () => {
        if (onClickOther) {
            onClickOther(); //当被点击时调用回调函数
        }
    };
    return (
        <div className="sub-title">
            {title}
            <span onClick={handleOtherClick}>{other}</span>
        </div>
    );
};

export default SubTitle;

通讯机制

• 父到子通讯：这是通过props实现的。Father 组件通过props将 clickOther 函数传递给 SubTitle 组件。在 SubTitle 组件内部，这个函数被赋值给了一个名为 onClickOther 的变量，并在点击事件处理函数 handleOtherClick 中被调用（如果它存在）。

• 事件处理：在 SubTitle 组件中，有一个 span 元素，它绑定了一个点击事件处理器 handleOtherClick。当这个 span 被点击时，handleOtherClick 函数会被调用，进而检查 onClickOther 函数是否存在并调用它。这种机制允许 Father 组件定义点击行为，而 SubTitle 组件仅负责触发这个行为。

import SubTitle from '@/components/Title/SubTitle';   //根据本地路径引入

const Father: React.FC = () => {

   const clickOther = () => {
        console.log('点击了更多按钮，通常为打开更多弹窗');
   };                

   return (
        <>
            <SubTitle title="实时数据" other="查看更多" onClickOther={clickOther} />
        </>
    );
};
export default Father;

工作流程 

1. 用户看到Father组件渲染的SubTitle组件，并注意到其中有一个可以点击的span元素（显示“查看更多”）。

2. 用户点击这个span元素。

3. SubTitle组件的handleOtherClick函数被触发。

4. handleOtherClick函数内部检查onClickOther是否存在（即Father组件是否提供了这个函数）。

5. 如果onClickOther存在，handleOtherClick函数就调用它，进而检查 onClickOther 函数是否存在并调用它

6. onClickOther函数是Father组件定义的，它执行了一些操作（在这个例子中，是在控制台输出一条消息）。