Question

将react-scrollbars-custom@4.0.0-alpha.13与TypeScript一起使用，onScroll事件的正确实现是什么？

编辑：我怀疑Type onScroll的通用定义与插件之间会发生某种名称空间冲突；为onScroll查找参考有两个结果，这反映了此问题底部给出的错误，特别是not assignable to type '((event: UIEvent<HTMLElement>) => void) & ((scrollValues: ScrollValues, prevScrollValues: ScrollValues) => void)

我真的不明白＆在该类型中的含义，这是否意味着它期望将两个函数进行某种形式的结合，这是如何工作的，我是否要传递所有可能的参数？

这就是我现在拥有的：

import * as React from "react";
import { Scrollbar } from 'react-scrollbars-custom';

export default class App extends React.Component  {

    handleScroll = (scrollValues : ScrollValues, prevScrollValues : ScrollValues)  => {
        // ...      
    }

    render() {

        return <Scrollbar onScroll={this.handleScroll} style={{ position: "absolute", height:"100%", width:"100%" }}>
        // ...
        </Scrollbar>
    }   
}

这是错误消息：

Error TS2322 (TS) Type '(scrollValues: ScrollValues, prevScrollValues: ScrollValues) => void' is not assignable to type '((event: UIEvent<HTMLElement>) => void) & ((scrollValues: ScrollValues, prevScrollValues: ScrollValues) => void)'. Type '(scrollValues: ScrollValues, prevScrollValues: ScrollValues) => void' is not assignable to type '(event: UIEvent<HTMLElement>) => void'

Answer 1

您怀疑，交集类型来自onScroll的重载定义。 react-scrollbars-custom与@types/react的React自己的定义发生冲突。稍微解释一下，您会看到这种情况：

type ScrollbarProps = ElementProps & {
 onScroll?: (scrollValues: ScrollValues, prevScrollValues: ScrollValues) => void;
}

通过几个界面跳转，ElementProps最终从onScroll的{{1}}中获得了DOMAttributes的属性：

@types/react

实际上不应以这种方式定义类型。但是，这是您等待清除该问题时的一种选择。请注意，这只是绕开了问题，仅比interface DOMAttributes<T> { onScroll?: UIEventHandler<T>; }的类型略胜一筹：

any[]

Answer 2

经过大量的努力之后，我认为这可能是该插件的最新版本的问题，现在恢复到3.1.5是一种解决方法，但这是后面的整个主要版本。如果有人知道为什么会发生这种情况，请回答，我会接受。

TypeScript React事件处理程序错误；类型不能分配给类型（联合）

2 个答案: