TypeScript React中await是保留字？使用async/await报错求助

你遇到的问题核心是await只能在标记为async的函数内部使用，而你的mousedown事件回调函数并没有被声明为async。另外还有个小细节：classList.add是同步方法，根本不需要用await，不过先帮你把语法错误搞定，再聊聊这个点。

错误原因拆解 #

看这段出问题的代码片段：

e.addEventListener("mousedown", (event: any) => {
  await this.dragElement.classList.add("draggable");
  await this.resizeElement.classList.add("resizable");
}

这里的箭头函数是普通函数，没有async修饰符，JavaScript引擎无法识别这是一个异步函数，所以在里面使用await就会触发“await是保留字”的语法错误。

修正方案 #

方案1：给事件回调添加async修饰（适合有真实异步逻辑的场景）

如果之后你需要在这个回调里执行异步操作（比如API请求、Promise调用），可以把回调函数声明为async：

private drags = async () => { 
  const e = ReactDOM.findDOMNode(this.container);
  if (e) { 
    e.addEventListener("mousedown", async (event: any) => { // 这里添加async
      // 假设有异步操作时再用await，比如：
      // await fetchSomeData();
      this.dragElement.classList.add("draggable");
      this.resizeElement.classList.add("resizable");
    });
  }
}

方案2：移除不必要的await（当前场景更合适）

因为classList.add是同步执行的DOM操作，完全不需要用await，直接去掉await就能解决错误：

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

额外优化提示 #

1. ReactDOM.findDOMNode已经被标记为过时（deprecated），推荐使用类组件的createRef来获取DOM节点，更符合React最佳实践：

// 类组件内声明ref
private containerRef = React.createRef<HTMLDivElement>();

// render中绑定ref
render() {
  return <div ref={this.containerRef}>你的组件内容</div>;
}

// 在drags中使用ref
private drags = async () => { 
  const e = this.containerRef.current;
  if (e) { 
    // ...后续事件绑定逻辑
  }
}

2. 确保this.dragElement和this.resizeElement已经正确获取到目标DOM节点，避免出现undefined导致后续操作失败。

内容的提问来源于stack exchange，提问作者Neha Takhi