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>？

1 个答案: