React中跨两层组件传递函数作为Props的问题及示例

我来帮你梳理一下正确的实现方式，顺便修正你代码里的小问题：

首先看你的App组件，原来传递onItemRemove的时候写了() => this.onItemRemove，这相当于返回了函数本身，而不是把可用的函数引用传过去。因为你的onItemRemove是用箭头函数定义的，已经自动绑定了组件的this，所以直接传this.onItemRemove就行。

接下来，ToDoList组件需要把这个删除函数继续传递给每个ToDoItem，这里有两种常见的实现方式，下面给你展示完整的修正代码：

1. App 组件（顶层） #

interface IState {
  todos: any[];
}

// 假设 TODOS 是预先定义的待办事项数组
const TODOS = [
  { id: 1, name: "学习React" },
  { id: 2, name: "整理代码" }
];

class App extends React.Component<{}, IState> {
  public state: IState = { todos: TODOS };

  // 箭头函数自动绑定this，无需额外处理上下文
  private onItemRemove = (item: any) => {
    // 实现删除逻辑：过滤掉被点击的item
    this.setState(prevState => ({
      todos: prevState.todos.filter(todo => todo.id !== item.id)
    }));
  };

  render() {
    return (
      <div>
        {/* 直接传递函数引用给ToDoList */}
        <ToDoList todos={this.state.todos} onItemRemove={this.onItemRemove} />
      </div>
    );
  }
}

2. ToDoList 组件（中间层） #

interface IToDoListProps {
  todos: any[];
  onItemRemove: (item: any) => void;
}

const ToDoList: React.FC<IToDoListProps> = props => {
  return (
    <ul>
      {props.todos.map((todo: any) => {
        return (
          <ToDoItem
            name={todo.name}
            key={todo.id}
            id={todo.id.toString()}
            {/* 方式一：绑定当前todo到删除函数，ToDoItem点击时直接调用 */}
            onItemRemove={() => props.onItemRemove(todo)}
            {/* 方式二：直接传递函数，让ToDoItem自己传参数 */}
            // onItemRemove={props.onItemRemove}
            // todo={todo}
          />
        );
      })}
    </ul>
  );
};

3. ToDoItem 组件（底层） #

// 对应方式一的Props定义
interface IToDoItemProps {
  name: string;
  id: string;
  onItemRemove: () => void;
}

// 对应方式二的Props定义
// interface IToDoItemProps {
//   name: string;
//   id: string;
//   todo: any;
//   onItemRemove: (item: any) => void;
// }

const ToDoItem: React.FC<IToDoItemProps> = props => {
  // 方式二的处理逻辑
  // const handleRemove = () => {
  //   props.onItemRemove(props.todo);
  // };

  return (
    <li>
      {props.name}
      {/* 方式一：直接调用传入的绑定好参数的函数 */}
      <button onClick={props.onItemRemove}>删除</button>
      {/* 方式二：调用自己封装的处理函数 */}
      // <button onClick={handleRemove}>删除</button>
    </li>
  );
};

关键要点说明： #

• 函数绑定：类组件中用箭头函数定义事件处理函数，能自动绑定组件实例的this，避免传递时丢失上下文。
• Props传递：跨层传递函数时，直接传引用即可；如果需要给函数绑定当前循环的参数（比如每个todo），可以用箭头函数包裹，这样ToDoItem调用时无需再传参数。
• 类型安全：用TypeScript定义每个组件的Props接口，能提前发现类型错误，让代码更健壮。

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