react 中不推荐将 jsx 元素从子组件传回父组件；正确做法是通过回调函数（event handler）将用户交互意图“通知”父组件，由父组件统一管理状态与渲染逻辑。
在 React 的单向数据流设计原则下，状态提升（Lifting State Up） 是处理跨组件协作的核心模式。当需要让一个子组件（如按钮）影响另一个兄弟组件的状态时，关键不是“传递 JSX”，而是“传递行为”——即定义在父组件中的事件处理器，并通过 props 下发给子组件调用。
✅ 正确实践：用回调函数解耦交互逻辑
子组件只负责 UI 呈现和事件触发，不持有或生成状态相关的 JSX；所有状态更新、条件渲染等逻辑均由父组件集中控制：
import { useState } from 'react';
export default function Parent() {
const [isSubmitted, setIsSubmitted] = useState(false);
const [count, setCount] = useState(0);
// 父组件定义业务逻辑
const handleFormSubmit = () => {
setIsSubmitted(true);
};
const handleIncrement = () => {
setCount(prev => prev + 1);
};
return (
<div>
{/* 子组件A：表单区域 */}
<FormSection onSubmit={handleFormSubmit} />
{/* 子组件B：计数器区域 */}
<CounterDisplay count={count} />
{/* 子组件C：独立按钮，用于影响兄弟组件状态 */}
<ActionButton onClick={handleIncrement} label="增加计数" />
{/* 条件渲染：由父组件统一决定 */}
{isSubmitted && <SuccessMessage />}
</div>
);
}
// 纯展示型子组件：只接收 handler，不关心状态
function FormSection({ onSubmit }: { onSubmit: () => void }) {
return (
<form onSubmit={(e) => { e.preventDefault(); onSubmit(); }}>
<button type="submit">提交表单</button>
</form>
);
}
function CounterDisplay({ count }: { count: number }) {
return <p>当前计数：<strong>{count}</strong></p>;
}
function ActionButton({
onClick,
label
}: {
onClick: () => void;
label: string;
}) {
return <button onClick={onClick}>{label}</button>;
}
function SuccessMessage() {
return <div className="success">✅ 提交成功！</div>;
}⚠️ 为什么不应传递 JSX 元素？
- 违反单一职责：JSX 是视图层产物，将其作为数据传递会模糊组件边界；
- 破坏可预测性：父组件无法静态分析哪些 JSX 可能被注入，导致调试困难；
- 性能隐患：若频繁创建新 JSX 对象（如 () => ），可能引发不必要的重渲染；
- 违背 React 哲学：React 推崇“状态驱动 UI”，而非“UI 驱动状态”。
? 补充说明：若确实需动态生成内容（如自定义页脚、弹窗主体），应使用 Render Props 或 Children as Function 模式，但其本质仍是父组件控制渲染时机与上下文，而非子组件“反向注入” JSX。
✅ 最佳实践总结
- ✅ 状态始终定义在共同祖先组件中（通常是直接父级）；
- ✅ 子组件通过 props 接收类型明确的回调函数（如 onClick, onSubmit, onSelect）；
- ✅ 所有基于状态的条件渲染（如 showModal ?
: null）均放在父组件内完成； - ✅ 避免在 useState 或 useMemo 中存储 JSX 元素（除非极特殊场景且已充分权衡代价）；
- ✅ 利用 TypeScript 为回调函数标注清晰签名，增强可维护性。
遵循这一模式，不仅能确保组件间通信清晰可控，也为后续测试、复用和状态管理（如集成 Redux 或 Zustand）打下坚实基础。
