Question

问题澄清：

具体来说，我想知道如何在没有打字稿的情况下编写下面的例子。了解如何在类等上声明属性对我有用。我相信应该可以使用blueprintjs（用typescript编写），而不是在我的实现中使用typescript。

我正在关注以下文档：http://blueprintjs.com/docs/#components.toaster.js.react

有这样的示例代码：

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

javascript私有属性语法无法识别

2 个答案: