В React с Redux, как сделать двойной колоны работать

Я пытаюсь использовать ES2017 в моем React проекте с WebPackВ React с Redux, как сделать двойной колоны работать

У меня есть файл .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>

ничего неправильно?

источник

2017-02-06 Benjamin Li

может кто-нибудь поделиться рабочей копии конфигурационных файлов? –

Я не уверен, что вы включаете правые пресеты, https://babeljs.io/docs/plugins/preset-es2017/ упоминает только два элемента, которые он включает, а '::' не входит в список. Попробуйте использовать [последний] (https://babeljs.io/docs/plugins/preset-latest/) – vittore

двойной двоеточие находится в списке ES2016. Но я хочу использовать ES2017 напрямую –

Не ответ сам по себе, но вы можете добиться подобного поведения, объявляя методы класса как лямбды (или любой другой метод, упомянутый here):

export class MyComponent extends React.Component { 

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

}

источник

2017-02-06 04:34:32 vittore

Я знаю, что это может быть достигнуто ES6 или даже ES5. Но я просто хочу использовать ES2017. Спасибо всем тем –

Для того, чтобы сделать использование оператора :: для привязать функции, вам необходимо использовать плагин 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+ синтаксис связывания функции, а не ES2017

Подробнее об этом here:

источник

2017-02-06 04:58:03

как насчет предустановки в файле .babelrc? спасибо –

обновлен ответ –

ошибка синтаксиса –

В React с Redux, как сделать двойной колоны работать

ответ

Смежные вопросы