如何在 React 中通过 props 向按钮组件传递并执行不同函数 返回列表

本文讲解如何在 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 (
    
      
        
        
        
Drag and drop to reorder list
      
    
  );
}

2. TaskControl 组件按需为每个 指定对应函数：

const TaskControl = ({ tasks, showActive, showAll }) => {
  return (
    
      
      
      
    
  );
};

⚠️ 注意：第三个按钮（“Completed”）尚未实现逻辑，此时可暂不传 onClick，或传一个空函数 onClick={() => {}} 避免 undefined 调用报错。

3. Button 组件保持极简，仅接收并触发 onClick：

const Button = ({ text, color, onClick }) => {
  // 安全处理：若未传 onClick，则默认为空函数，防止 onClick={undefined}()
  const handleClick = onClick || (() => {});

  return (
    
      {text}
    
  );
};

? 关键优势总结：

• ✅ 解耦清晰：Button 不关心业务逻辑，只专注 UI 与事件绑定；
• ✅ 扩展性强：新增按钮（如 “Incomplete”）只需在 TaskControl 中传入新函数，无需修改 Button；
• ✅ 类型友好：配合 TypeScript 可轻松约束 onClick?: () => void，提升可靠性；
• ✅ 可测试性高：Button 单元测试只需验证是否正确调用了传入的函数。

? 小贴士：若需向回调函数传递参数（如 showByStatus('completed')），可在父组件中使用箭头函数包裹：

 showByStatus('completed')} />

但注意避免在 render 中创建新函数（可能引发不必要的重渲染），必要时可用 useCallback 缓存。

遵循这一模式，你的按钮组件将成为真正可复用的 UI 基元，让逻辑组织更清晰、代码更健壮。