Question

考虑以下代码

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

 private onItemRemove = (item: any) {
  /////
 }

   render() {
    return (
      <div>
        <ToDoList
          todos={this.state.todos}
          onItemRemove={() => this.onItemRemove}
        />
      </div>
    );
  } 
}

const ToDoList: React.SFC<IProps> = props => {
  return (
    <ul>
      {props.todos.map((todo: any) => {
        return (
          <ToDoItem
            name={todo.name}
            key={todo.id}
            id={todo.id.toString()}
            onItemRemove={props.onItemRemove}
          />
        );
      })}
    </ul>
  );
}

const ToDoItem: React.SFC<IProps> = props => {
  return (
    <li>
      {props.name}
      <button onClick={() => props.onItemRemove(props.id)}>
        Remove
      </button>
    </li>
  );
};

我听说这可以通过redux或context来实现，但是可以从App传递到ToDoItem onItemRemove方法而不使用redux或context？

或许有一种更优化的方法可以实现这一点，我可能会错过这种方法？

Answer 1

来自官方文档：不要仅使用上下文来避免将道具传递几层。坚持需要在多个级别的许多组件中访问相同数据的情况。 https://reactjs.org/docs/context.html#when-to-use-context

所以你的代码似乎非常优秀。

传递功能作为两级深层次的道具

1 个答案: