时间戳

首页 > 解决方案 > 尝试添加时出错React 组件的包装器：（类型“{ children: Element;}”中缺少属性“onDragEnd”）

javascript - 尝试添加时出错React 组件的包装器：（类型“{ children: Element;}”中缺少属性“onDragEnd”）

问题描述

尝试react-beautiful-dnd在待办事项列表类型应用程序中使用，但是当尝试将ul我的列表组件包装在组件中<DragDropContext/>时，我抛出以下错误

No overload matches this call.
  Overload 1 of 2, '(props: DragDropContextProps | Readonly<DragDropContextProps>): DragDropContext', gave the following error.
    Property 'onDragEnd' is missing in type '{ children: Element; }' but required in type 'Readonly<DragDropContextProps>'.
  Overload 2 of 2, '(props: DragDropContextProps, context: any): DragDropContext', gave the following error.
    Property 'onDragEnd' is missing in type '{ children: Element; }' but required in type 'Readonly<DragDropContextProps>'

控制台进一步指出此错误源自我的 indext.ts.d 文件中的这段代码；

export interface DragDropContextProps {
    onBeforeCapture?(before: BeforeCapture): void;
    onBeforeDragStart?(initial: DragStart): void;
    onDragStart?(initial: DragStart, provided: ResponderProvided): void;
    onDragUpdate?(initial: DragUpdate, provided: ResponderProvided): void;
    onDragEnd(result: DropResult, provided: ResponderProvided): void;
    children: React.ReactNode | null;
    dragHandleUsageInstructions?: string | undefined;
    nonce?: string | undefined;
    enableDefaultSensors?: boolean | undefined;
    sensors?: Sensor[] | undefined;
}

export class DragDropContext extends React.Component<DragDropContextProps> { }

任何人都可以帮助我理解这个错误，以及我如何能够解决它？

下面是显示我尝试将 DragDropContext 添加到的 React 组件的代码。

export const TodoList: React.FC<TodoListProps> = ({
  todos,
  toggleComplete,
  deleteTodo,
  updateTodo
}) => {

  return (
    <React.Fragment>
    <h2>Current List</h2>
    <DragDropContext>
    <ul className = 'list-group'>
      {todos.map((todo) => (
        <TodoListItem
          key={todo.text}
          todo={todo}
          toggleComplete={toggleComplete}
          deleteTodo = {deleteTodo}
          updateTodo = {updateTodo}
        />
      ))}
    </ul>
    </DragDropContext>
    </React.Fragment>
  );
};

标签： javascriptreactjstypescriptdrag-and-dropreact-beautiful-dnd

解决方案

打字稿指出DragDropContext需要一个onDragEnd道具。如果你还没有准备好实现那个函数，那么现在就放一个空函数。

<DragDropContext onDragEnd={(result, provided) => {
  // TODO: implement onDragEnd
}}>

推荐阅读