尝试将<DragDropContext>包装器添加到 React 组件时出错：(类型"{ 子项：元素; } 中缺少属性'onDragEnd')

Question

试图在待办事项列表类型应用程序中使用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>
);
};

Answer 1

Typescript指出DragDropContext需要一个onDragEndprop。如果您还没有完全准备好实现这个函数，那么现在只需在那里放置一个空函数。

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