Question

我正在尝试整合this react swipe module on github。在我开始将refs集成到我的代码中之前，一切都进展顺利。我试图从onClick调用反应函数。以下是我正在使用的code snippet：

class Page extends Component {
    next() {
        this.refs.reactSwipe.next();
    }

    prev() {
        this.refs.reactSwipe.prev();
    }

    render() {
        return (
            <div className="center">
                <h1>ReactSwipe.js</h1>
                <h2>Open this page from a mobile device (real or emulated).</h2>
                <h2>You can pass <a href="https://github.com/voronianski/swipe-js-iso#config-options">Swipe.js options</a> as query params.</h2>

                <ReactSwipe ref="reactSwipe" className="mySwipe" swipeOptions={swipeOptions}>
                    {paneNodes}
                </ReactSwipe>

                <div>
                    <button type="button" onClick={::this.prev}>Prev</button>
                    <button type="button" onClick={::this.next}>Next</button>
                </div>
            </div>
        );
    }
}

问题是网络广告正在从Module build failed: SyntaxError: Unexpected token开始:投放<button type="button" onClick={::this.prev}>Prev</button>：

::

我需要在webpack设置中添加哪些设置以允许此onClick？或者如何在没有::函数绑定的情况下从html import java.util.*; public class PracticeMethods_returningValues { static Scanner type=new Scanner(System.in); public static void main(String[] args)调用react函数？

Answer 1

我在this blog post游荡后想通了。 <br />是ES7 proposed shortcut，需要告知babel使用ES7的建议部分。

所以我安装了stage 0 preset from babel：

::

然后我更新了我的网络包以识别这一点：

npm install babel-preset-stage-0 --save-dev

关键部分是这一行：

module: {
  loaders: [
    {
      loader: "babel-loader",

      // Skip any files outside of your project's `src` directory
      include: [
        path.resolve(__dirname, "src"),
      ],

      // Only run `.js` and `.jsx` files through Babel
      test: /\.jsx?$/,

      // Options to configure babel with
      query: {
        presets: ['stage-0', 'react'],
      }
    },
  ]
}

Webpack Sytax错误来自React代码的意外“::”

1 个答案: