reactjs - 在 React 和 Redux 中如何使双冒号起作用

Question

我正在尝试在我的 React 项目中使用 ES2017 和 webpack

我有一个 .babelrc 文件和一个 package.json。

这是我的 .babelrc 文件:

{
  "presets": ["es2017"]
}

这是package.json:

 {
  "name": "myapp",
  "version": "1.0.0",
  "private": true,
  "devDependencies": {
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-plugin-syntax-async-functions": "^6.13.0",
    "babel-plugin-syntax-trailing-function-commas": "^6.22.0",
    "babel-plugin-transform-async-to-generator": "^6.22.0",
    "babel-preset-es2017": "^6.22.0",
    "enzyme": "^2.4.1",
    "react-addons-test-utils": "^15.3.0",
    "react-scripts": "^0.4.0",
    "webpack": "^2.2.1"
  },
  "dependencies": {
    "css-loader": "^0.26.1",
    "react": "^15.3.0",
    "react-bootstrap": "^0.30.7",
    "react-dom": "^15.3.0",
    "react-redux": "^4.4.5",
    "react-router": "^3.0.0",
    "react-router-redux": "^4.0.7",
    "redux": "^3.5.2",
    "redux-logger": "^2.6.1",
    "redux-thunk": "^2.1.0",
    "style-loader": "^0.13.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "eject": "react-scripts eject",
    "test": "react-scripts test"
  },
  "eslintConfig": {
    "extends": "./node_modules/react-scripts/config/eslint.js"
  }
}

当我尝试使用双冒号时，控制台报告语法错误

<div onMouseEnter={::this.mouseEnter()}>
</div>

有什么问题吗？

Answer 1

为了利用 ::操作符绑定(bind)函数，需要使用babel-plugin-transform-function-bind插件。

使用以下命令安装它

npm install --save-dev babel-plugin-transform-function-bind

然后在你的.babelrc中将其包含为

{
    "presets": ["react", "stage-0", "es2015"],
    "plugins": ["transform-function-bind"]
 }

确保使用

安装上述内容

npm install -S babel-preset-stage-0 babel-preset-2015 babel-preset-react

::是ES2015+函数绑定(bind)语法而不是ES2017

了解更多信息 here :