React中传递函数作为Props：实现handleDelete传入Todo组件点击删除

这事儿太常见了，我日常写React项目经常这么搞！核心思路就是父组件负责管理Todo列表的状态，把删除方法作为props传给子组件，子组件点击删除按钮时，把自己的唯一标识（比如id）回传给父组件，父组件再根据这个标识过滤掉对应的Todo项就行。

1. 父组件（比如App.js） #

首先父组件要维护Todo列表的状态，并且定义删除函数，然后把这个函数和每个Todo项的数据一起传给子组件：

import { useState } from 'react';
import Todo from './Todo';

function App() {
  // 初始化Todo列表，每个项一定要带唯一id，这是定位删除项的关键
  const [todos, setTodos] = useState([
    { id: 1, text: '买早餐食材' },
    { id: 2, text: '完成React组件练习' },
    { id: 3, text: '整理桌面文件' }
  ]);

  // 定义删除函数，接收要删除的Todo的id作为参数
  const handleDelete = (todoId) => {
    // 通过filter过滤掉id匹配的项，用函数式更新确保拿到最新状态
    setTodos(prevTodos => prevTodos.filter(todo => todo.id !== todoId));
  };

  return (
    <div className="todo-app">
      <h2>我的待办清单</h2>
      {/* 遍历Todo列表，给每个子组件传递todo数据和删除方法 */}
      {todos.map(todo => (
        <Todo 
          key={todo.id}  // 列表项必须加唯一key，React渲染要求
          todo={todo} 
          onDelete={handleDelete} 
        />
      ))}
    </div>
  );
}

export default App;

2. 子组件（比如Todo.js） #

子组件只需要接收父组件传过来的todo数据和onDelete方法，点击删除按钮时调用这个方法并传入当前Todo的id：

function Todo({ todo, onDelete }) {
  return (
    <div className="todo-item">
      <p>{todo.text}</p>
      {/* 点击按钮时触发父组件的删除方法，传入当前todo的id */}
      <button onClick={() => onDelete(todo.id)}>删除</button>
    </div>
  );
}

export default Todo;

• 状态放在父组件：因为删除操作会修改Todo列表，状态应该由需要使用它的最顶层组件（这里就是父组件）来管理，子组件只负责展示和触发动作。
• 用唯一id定位：千万不要用数组索引来删除，因为列表顺序变化时索引会跟着变，容易出bug，给每个Todo项加唯一id才是正确做法。
• 函数式更新状态：我在父组件的setTodos里用了函数式更新（prevTodos => ...），这样可以确保拿到最新的状态值，避免状态更新的竞态问题。

内容的提问来源于stack exchange，提问作者user9345978