我想使用异步等待。但它正在给出 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");
}
}
答案 0 :(得分:0)
最好以问题的缩减但充分运作的例子开始提问。所以这是起点,包括错误。
声明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 });
});
}
}
}