你如何在 blueprintjs 中使用 <Toast>？

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 只是在代码中添加了类型检查。您可以从 this question.

了解更多信息

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

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!" });
  }
}

你如何在 blueprintjs 中使用 <Toast>？

How do you use a <Toast> in blueprintjs?

typescript

reactjs

blueprintjs