JavaScript私有属性语法未被认可

Question

问题澄清：

具体来说，id喜欢知道如何在没有打字稿的情况下编写下面的示例。了解如何声明课程等对我有用。我相信应该可以使用blueprintjs（用打字稿编写），而无需在我的实现中使用Typescript。

---

我正在关注文档：

有这样的示例代码：

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

，但我得到了Syntax Error: Unexpected token, expected ( (5:16)，这是"私人"之后的"烤面包机"。我不是预编译打字稿。我将ES6与WebPack一起使用。我如何重写此示例代码以与我的环境合作？

谢谢。

Answer 1

blueprintjs是使用TypeScript实现的，该示例使用Typescript语法。

请参阅：http：//blueprintjs.com/docs/#typescript

Answer 2

这是我做的。我从WebPack那里得到了一些基于此教程的帮助：https：//www.typescriptlang.org/docs/handbook/react--＆amp-pamp; webpack.html。我将tsconfig.json配置文件中的目标设置为ES6，这就是WebPack编译为（或多或少）。

欢迎对此解决方案进行的任何手动改进。

import {Button, Position, Toaster} from "@blueprintjs/core";
class ToastLauncher extends React.Component {
    constructor(props) {
        super(props);
        this.refHandlers = {
            toaster: (ref) => this.toaster = ref,
        };
        this.addToast = () => {
            this.toaster.show({ message: "Toasted!" });
        };
    }
    render() {
        return (
            <div>
                <Button onClick={this.addToast} text="Procure toast" />
                <Toaster position={Position.TOP_RIGHT} ref={this.refHandlers.toaster} />
            </div>
        )
    }
}
export default ToastLauncher