react 中不应将 jsx 元素从子组件传回父组件；正确做法是通过回调函数（event handler）将用户交互行为“通知”父组件，由父组件统一管理状态和渲染逻辑。
在 React 的单向数据流设计原则下，状态提升（Lifting State Up） 是处理跨组件交互的标准模式。与其尝试把 JSX 元素（如 <Button />）从子组件“返回”给父组件——这不仅违背 React 的声明式哲学，还极易导致状态不一致、内存泄漏或难以调试的副作用——不如让子组件专注 UI 渲染与事件触发，将状态变更逻辑完全交由父组件控制。
✅ 正确实践：通过回调函数解耦交互与状态
父组件定义状态及更新逻辑，并将事件处理器作为 props 传入子组件。子组件只需绑定该处理器到对应 DOM 事件（如 onClick），无需知晓具体实现：
import { useState } from 'react';
export default function Parent() {
const [isSubmitted, setIsSubmitted] = useState(false);
const handleSubmit = () => {
console.log('Form submitted!');
setIsSubmitted(true);
};
return (
<div>
<Form onSubmit={handleSubmit} />
<StatusDisplay status={isSubmitted} />
</div>
);
}
function Form({ onSubmit }: { onSubmit: () => void }) {
return (
<form onSubmit={(e) => {
e.preventDefault();
onSubmit(); // 触发父组件定义的逻辑
}}>
<button type="submit">Submit</button>
</form>
);
}
function StatusDisplay({ status }: { status: boolean }) {
return (
<div>{status ? <span>✅ Submitted!</span> : <span>⏳ Waiting...</span>}</div>
);
}? 关键点：Form 组件不持有 isSubmitted 状态，也不生成任何依赖该状态的 JSX；它只负责“转发”用户动作。真正决定“提交后显示什么”的，是 Parent 组件中基于 isSubmitted 的条件渲染。
⚠️ 常见误区与注意事项
-
❌ 避免在 state 中存储 JSX
// 错误示例：将 JSX 存入 state（易引发 stale closure、性能问题、不可预测重渲染） const [buttonElement, setButtonElement] = useState<JSX.Element>(<button>Click me</button>);
JSX 是渲染结果，不是数据。状态应只保存纯数据（如布尔值、字符串、对象），UI 表达应始终在 return 中动态生成。
❌ 不要反向“注入”组件实例
试图让子组件返回一个按钮并由父组件插入到另一处 DOM（如 sibling 组件旁），本质上混淆了职责边界。若需协调多个兄弟组件，应将共享状态和操作函数全部提升至最近共同父组件。✅ 推荐进阶模式：自定义 Hook 封装逻辑
当交互逻辑复杂时（如表单验证、异步提交），可封装为自定义 Hook（如 useFormState()），进一步解耦业务逻辑与组件结构，保持父组件简洁。
总结
React 的核心优势在于可预测的数据流与明确的职责划分。子组件向父组件“传递 JSX”是一种反模式；真正需要传递的，永远是意图（intent）——即用户做了什么（onSubmit, onToggle, onDelete），而非 UI 片段。坚持“状态上提 + 回调驱动”，不仅能写出更健壮、可测试的代码，也使组件复用性与协作效率显著提升。
