reactjs - 你如何使用一个在蓝图js？

Question

作为不使用打字稿的人，我很难弄清楚如何使用Toast。我可以说这个组件看起来与其他组件不同。

这是示例代码，ES6 等价物是什么？

import { Button, Position, Toaster } from "@blueprintjs/core";

class MyComponent extends React.Component<{}, {}> {
 private toaster: Toaster;
 private refHandlers = {
    toaster: (ref: Toaster) => this.toaster = ref,
 };

   public render() {
    return (
        <div>
            <Button onClick={this.addToast} text="Procure toast" />
            <Toaster position={Position.TOP_RIGHT} ref={this.refHandlers.toaster} />
        </div>
    )
  }

  private addToast = () => {
    this.toaster.show({ message: "Toasted!" });
 }
}

Answer 1

TypeScript 只是将类型检查添加到代码中。您可以从这个问题中了解更多信息。

更改非常简单。您只需要删除类型声明。

import { Button, Position, Toaster } from "@blueprintjs/core";

class MyComponent extends React.Component {
   refHandlers = {
     toaster: (ref) => this.toaster = ref,
   };

   render() {
     return (
       <div>
         <Button onClick={this.addToast} text="Procure toast" />
         <Toaster position={Position.TOP_RIGHT} ref={this.refHandlers.toaster} />
       </div>
     )
  }

  addToast = () => {
    this.toaster.show({ message: "Toasted!" });
  }
}