在TypeScript中使用scrollTop方法时，调用签名错误

Question

我希望cardSummary元素在单击时滚动到顶部。 到目前为止，这是我所应用的：

public onClickHandler(event: React.MouseEvent<any>): void {
    if (this.props.onClick) {
        console.log("scroll");
        if (this.isInViewport(this._cardSummary) === false) {
            this._cardSummary.scrollTop(0);
            this.props.onClick(event);
        }
    }
}

现在，当我要对此进行编译时，出现错误Cannot invoke an expression whose type lacks a call signature. Type 'Number' has no compatible call signatures. Cannot invoke an expression whose type lacks a call signature. Type 'Number' has no compatible call signatures.

当元素不在视口中时，我该怎么做才能调用scrollTop方法？

这是整个组件：

export class CardSummary extends React.Component<ICardSummaryProps, undefined> {
    public static defaultProps = { labelColor: "transparent" };

    private _cardSummary: HTMLDivElement;

    public render(): JSX.Element {
        return <div className="card-summary" onClick={this.onClickHandler.bind(this)} ref={(el) => this._cardSummary = el } >
            <div>
                <div className="color" style={{ "backgroundColor": this.props.labelColor, flexShrink: 0, "float": "left" }}></div>
                <div className="row card-rowcontainer">
                    {this.props.children}
                </div>
            </div>
        </div>;
    }

    public isInViewport(element: boolean) {
        const rect = element.getBoundingClientRect();
        const html = document.documentElement;
        return (
            rect.top >= 0 &&
            rect.left >= 0 &&
            rect.bottom <= (window.innerHeight || html.clientHeight) &&
            rect.right <= (window.innerWidth || html.clientWidth)
        );
    }

    public onClickHandler(event: React.MouseEvent<any>): void {
        if (this.props.onClick) {
            console.log("scroll");
            if (this.isInViewport(this._cardSummary) === false) {
                this._cardSummary.scrollTop(0);
                this.props.onClick(event);
            }
        }
    }
}

Answer 1

确保在tsconfig.json中的lib上包含dom类型：

"target": "es5",
"lib": [
  "dom",
  "es5",
  "scripthost"
],

请注意，如果目标是es5，则默认包含的库应该是don，es5和scripthost，因此，应该有所了解。

试试看，如果没有，请共享您的tsconfig。