如何推断此组件设置中的类型？
如何推断此组件设置中的类型？
提问于 2022-10-16 20:11:11
我从这个自定义钩子(从反应DnD)中收集了一个item对象。问题是，类型记录不允许我在下面的drop函数中访问它的属性，因为它的类型未知。
function MyComponent(props){
const [{item}, drop] = useDrop({
accept: "BLOCK",
collect: monitor => ({
item: monitor.getItem() // Item object collected here IDropTargetMonitor
}),
drop: (): void => setBlock_name(item.block_name) // /!\ Object [item] is of type 'unknown'
})
return ...
}模块中相应的接口如下：
export interface DropTargetMonitor<DragObject = unknown, DropResult = unknown>我在这里定义了item对象中想要的内容：
const OtherComponent = (props) => {
const [{isDragging}, drag] = useDrag({
type: "BLOCK",
item: {blockName: props.blockName}, // blockName is a string
collect: monitor => ({
isDragging: monitor.isDragging()
})
})
return ...
}如果有人能给我一个提示，告诉我如何推断物品类型，我将不胜感激。
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-10-17 02:24:02
有一些东西可以从您的代码中调整。useDrop是一个泛型，它接受拖动项的类型。它的定义是：
useDrop<DragObject = unknown, DropResult = unknown, CollectedProps = unknown>您可以为项创建一个接口：
interface Item {
blockName: string;
}然后重构useDrop钩子，如下所示：
const [{item}, drop] = useDrop<Item, unknown, {item: Item}>({
accept: "BLOCK",
collect: monitor => ({
item: monitor.getItem()
}),
drop: (item: Item): void => setBlock_name(item.blockName)
})这样，类型记录就会知道item是Item类型的。需要注意的是，代码中有setBlock_name(item.block_name)，但是应该是setBlock_name(item.blockName)，因为在useDrag中使用的是item: {blockName: props.blockName}，所以属性名是blockName而不是block_name。另一件事是，如果要在drop方法中使用useDrop中删除的项，则应该使用传递给drop: (item) => void的第一个参数，不需要在collect函数中捕获项。希望这能帮到你。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74090415
复制相关文章
相似问题
腾讯云开发者
