await是typescript reactJs中的保留字？

Question

我想使用异步等待。但它正在给出 await是一个保留字错误。我的代码是：

public componentDidMount() {
    this.drags();
}
private drags = async () => {
       const e = ReactDOM.findDOMNode(this.container);
    if (e) {
      e.addEventListener("mousedown", (event: any) => {
        await this.dragElement.classList.add("draggable");
        await this.resizeElement.classList.add("resizable");
       }
    }

Answer 1

最好以问题的缩减但充分运作的例子开始提问。所以这是起点，包括错误。

声明var ReactDOM：any;

class Example {
    dragElement: any;
    resizeElement: any;
    container: any;

    public componentDidMount() {
        this.drags();
    }

    private drags = async () => {
        const e = ReactDOM.findDOMNode(this.container);
        if (e) {
            e.addEventListener("mousedown", (event: any) => {
                await this.dragElement.classList.add("draggable");
                await this.resizeElement.classList.add("resizable");
            });
        }
    }
}

TypeScript编译器实际上使用以下消息识别此错误：

  

'await'表达式只允许在异步函数中使用。

这直接指向问题：该函数不是异步的，因此您无法使用async关键字。

异步

解决方案一 - 将其设为异步。

declare var ReactDOM: any;

class Example {
    dragElement: any;
    resizeElement: any;
    container: any;

    public componentDidMount() {
        this.drags();
    }

    private drags = async () => {
        const e = ReactDOM.findDOMNode(this.container);
        if (e) {
            e.addEventListener("mousedown", async (event: any) => {
                await this.dragElement.classList.add("draggable");
                await this.resizeElement.classList.add("resizable");
            });
        }
    }
}

无极

解决方案二 - 使用promises ...我已经包含了这个，因为您可以将异步语法与promise语法进行比较。

declare var ReactDOM: any;

class Example {
    dragElement: any;
    resizeElement: any;
    container: any;

    public componentDidMount() {
        this.drags();
    }

    private drags = async () => {
        const e = ReactDOM.findDOMNode(this.container);
        if (e) {
            e.addEventListener("mousedown", (event: any) => {
                Promise.all([
                    this.dragElement.classList.add("draggable"),
                    this.resizeElement.classList.add("resizable")
                ])
                    .then((result) => { /* Anything you need to do after */ })
                    .catch((reason) => { throw reason });
            });
        }
    }
}