在与Redux的React中如何使双冒号工作

Question

I am trying to use ES2017 in my React project with webpack

I have a .babelrc file, and a package.json .

this is my .babelrc file:

{
  "presets": ["es2017"]
}

and this is 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"
  }
}

When I am trying to use double colon, console reports syntax error

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

anything wrong?

Answer 1

In order to make use of the :: operator to bind the function, you need to use the babel-plugin-transform-function-bind plugin.

Install it using the below command

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

and then in your .babelrc include it as

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

Make sure you install the above using

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

:: is the ES2015+ function bind syntax and not ES2017

Read more about it here :

Answer 2

Not an answer per se, but you can achieve similar behavior by declaring class methods as lambdas (or any other method mentioned here ) :

 export class MyComponent extends React.Component {

    mouseEnter = () => {
       console.log('hover');
    }
    render() {
       return <h1 onMouseEnter={this.mouseEnter}>hi!</h1>
    }

 }