react 中不应直接传递 jsx 元素来实现父子通信；正确做法是通过事件回调函数（event handler）将状态更新逻辑保留在父组件中，子组件仅负责触发事件。
在 React 开发实践中，一个常见误区是试图“反向传递” JSX 元素（如按钮、表单控件等）从子组件到父组件，以期让父组件动态渲染或管理该元素。但这种做法不仅违背 React 的单向数据流原则，还容易导致状态分散、难以调试，且违反 React 官方推荐的模式（参见 React 官方文档：响应事件）。
✅ 正确范式是：状态提升（Lifting State Up） + 事件回调注入
即所有共享状态统一由父组件声明和维护，子组件通过 props 接收预定义的事件处理函数（如 onButtonClick, onSubmit），并在用户交互时调用它——触发后，状态更新与副作用逻辑全部在父组件内执行。
以下是一个典型示例，展示两个兄弟组件（如 <Button /> 和 <StatusDisplay />）如何通过父组件协调行为：
import { useState } from 'react';
export default function Parent() {
const [isActivated, setIsActivated] = useState(false);
// 状态变更逻辑完全由父组件掌控
const handleActivate = () => {
console.log('Button clicked — triggering state update in parent');
setIsActivated(true);
};
return (
<div>
{/* 子组件只接收 handler，不持有状态 */}
<ActionButton onActivate={handleActivate} />
{/* 另一兄弟组件消费同一状态 */}
<StatusDisplay isActive={isActivated} />
</div>
);
}
// 纯展示型子组件：不管理状态，只触发事件
function ActionButton({ onActivate }) {
return (
<button onClick={onActivate} disabled={false}>
激活功能
</button>
);
}
// 另一兄弟组件：只读取父组件传入的状态
function StatusDisplay({ isActive }) {
return (
<div className="status">
<strong>当前状态：</strong>
{isActive ? '已激活' : '未激活'}
</div>
);
}? 关键注意事项：
- ❌ 避免在 useState 或 useMemo 中存储 JSX 元素（如 useState(<Button />)），这会导致不必要的重新渲染和潜在的闭包陷阱；
- ✅ 所有事件处理器必须在父组件中定义（确保能访问最新状态和 setState 函数）；
- ✅ 子组件应保持“受控”或“无状态”，其唯一职责是 UI 呈现与事件转发；
- ✅ 若需传递多个参数（如 ID、类型），可使用箭头函数包装：onClick={() => onActivate(id, 'submit')}，但注意避免在渲染中创建新函数（可配合 useCallback 优化）。
总结：React 的设计哲学强调“数据向下，事件向上”。与其费力传递 JSX，不如让父组件成为状态与逻辑的中心枢纽——这不仅提升可维护性，也使组件职责更清晰、测试更简单、协作更高效。
