本文讲解如何在 react 中将多个业务逻辑函数（如 `showall`、`showactive`）作为 `onclick` 处理器，灵活传递给通用按钮组件，避免硬编码或条件判断，实现高复用、低耦合的按钮交互设计。
在 React 开发中，为保持组件的通用性与可维护性，我们应避免在子组件（如 ）内部对不同功能做硬编码分支（例如 if (id === 'all') call showAll()）。正确做法是：由父组件决定“点击时做什么”，子组件只负责“执行被传入的函数”。
核心思想是：将函数作为 onClick prop 直接传递给 ，而非传递多个具名函数（如 showAll、showActive）再在按钮内自行调用——这既冗余又违背单一职责原则。
✅ 正确实践如下：
1. 在 App 中定义过滤函数，并通过 TaskControl 透传：
function App() {
const [todos, setTodos] = useState([...initialTodos]);
const [todosCopy, setTodosCopy] = useState(todos);
const showActive = () => {
const active = todos.filter(todo => !todo.isComplete);
setTodosCopy(active);
};
const showAll = () => {
setTodosCopy(todos);
};
return (
<div className="page">
<div className="container">
<Tasks tasks={todosCopy} onDelete={onDelete} onComplete={onComplete} />
<TaskControl
tasks={todos}
showActive={showActive}
showAll={showAll}
/>
<p className="hint">Drag and drop to reorder list</p>
</div>
</div>
);
}2. TaskControl 组件按需为每个
const TaskControl = ({ tasks, showActive, showAll }) => {
return (
<div className="task-filter">
<Button color="task-control-filter" text="All" onClick={showAll} />
<Button color="task-control-filter" text="Active" onClick={showActive} />
<Button color="task-control-filter" text="Completed" /* 暂无处理函数 */ />
</div>
);
};⚠️ 注意：第三个按钮（“Completed”）尚未实现逻辑，此时可暂不传 onClick，或传一个空函数 onClick={() => {}} 避免 undefined 调用报错。
3. Button 组件保持极简，仅接收并触发 onClick：
const Button = ({ text, color, onClick }) => {
// 安全处理：若未传 onClick，则默认为空函数，防止 onClick={undefined}()
const handleClick = onClick || (() => {});
return (
<button
className={`btn ${color}`}
onClick={handleClick}
type="button" // 推荐显式声明 type，避免表单提交意外
>
{text}
</button>
);
};? 关键优势总结：
- ✅ 解耦清晰：Button 不关心业务逻辑，只专注 UI 与事件绑定；
- ✅ 扩展性强：新增按钮（如 “Incomplete”）只需在 TaskControl 中传入新函数，无需修改 Button；
- ✅ 类型友好：配合 TypeScript 可轻松约束 onClick?: () => void，提升可靠性；
- ✅ 可测试性高：Button 单元测试只需验证是否正确调用了传入的函数。
? 小贴士：若需向回调函数传递参数（如 showByStatus('completed')），可在父组件中使用箭头函数包裹：
<Button text="Completed" onClick={() => showByStatus('completed')} />但注意避免在 render 中创建新函数（可能引发不必要的重渲染），必要时可用 useCallback 缓存。
遵循这一模式，你的按钮组件将成为真正可复用的 UI 基元，让逻辑组织更清晰、代码更健壮。
