Cursor中React组件通信须遵循单向数据流：父→子用带类型标注的props，子→父用参数签名严格的回调函数，跨层用useContext（支持自动导入），父子方法调用需useImperativeHandle配合ref类型声明。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
在Cursor中写React项目时，组件通信必须严格遵循单向数据流原则，否则会导致状态不可预测、热重载异常或TS类型报错。
父组件向子组件传值：用props传递基础数据与函数
在Cursor编辑器里打开父组件文件（如App.tsx），定义状态和处理函数后，直接通过JSX属性传入子组件。这一步不能省略类型标注，否则Cursor的TS语言服务会中断智能提示。
子组件必须显式声明Props接口，例如：【interface ChildProps { message: string; onConfirm: () => void }】。不写接口会导致Cursor无法推导props结构，后续解构时失去自动补全和错误高亮。
使用解构语法接收props，如const { message, onConfirm } = props，比props.message更利于Cursor识别变量作用域。
子组件向父组件回传数据：回调函数必须带参数签名
方法一：在父组件中定义带参数的回调函数，例如const handleItemClick = (id: number, status: boolean) => { ... }，再作为prop传给子组件。
方法二：子组件内触发时必须严格匹配参数数量和类型，比如onClick={() => onConfirm(item.id, item.done)}。若漏传一个参数，Cursor会在保存时立即标红并显示TS2345错误。
注意：不要在回调函数体内部修改父组件传来的原始对象，否则Cursor配合ESLint会触发no-param-reassign警告——这会导致后续re-render失败。
跨多层组件通信：用useContext + Cursor的自动导入提示
第一步：在context/ThemeContext.tsx中创建Context并导出Provider与useContext Hook。
第二步：在Cursor中右键点击未定义的useTheme，选择“Quick Fix → Import from ‘./context/ThemeContext’”，Cursor会自动插入import语句并修正路径。
第三步：在任意嵌套子组件中调用const { theme, setTheme } = useTheme()。此时Cursor会实时校验Context值是否已包裹在Provider内，未包裹则显示红色波浪线提示“Context is undefined”。
父子组件间方法调用：useImperativeHandle配合ref
① 在子组件顶部添加export interface ChildHandle { focusInput: () => void; resetForm: () => void }。
② 使用forwardRef包装组件，并在内部用useImperativeHandle暴露指定方法。这一步缺一不可，否则Cursor无法将ref类型关联到自定义Handle接口。
③ 父组件中声明const childRef = useRef
④ 触发时直接调用childRef.current?.focusInput()。Cursor会在输入.后精准列出focusInput和resetForm两个方法，不会出现any类型提示。
