浅谈箭头函数写法在ReactJs中的使用
ES7中的箭头函数写法真的是很方便,而现今ReactJs又非常流行而且好用,非常适合有Java面向对象经验的同学学习和使用,在使用Reacjs构建组件时,如果想要使用箭头函数写法定义函数该怎么办呢?
创新互联公司是一家专业提供萨嘎企业网站建设,专注与网站制作、成都网站设计、H5技术、小程序制作等业务。10年已为萨嘎众多企业、政府机构等服务。创新互联专业的建站公司优惠进行中。
首先,如果你直接在React组件中使用箭头函数写法定义函数,编译是不会通过的,会报出语法错误。
ERROR in ./modules/Repos.js Module build failed: SyntaxError: E:/AllWorkSpace/react-router/trunk/lessons/01- setting-up/modules/Repos.js: Unexpected token (4:16) 2 | import {Link} from 'react-router'; 3 | export default class Repos extends Component{ > 4 | handleSubmit = () => { | ^ 5 | 6 | } 7 | render(){ @ ./index.js 19:13-39
如上所述,handleSubmit函数定义失败,那要怎样才能让你的reactjs项目支持箭头函数写法呢,答案是 babel-preset-es2015,babel-preset-React,babel-preset-stage-0,babel-plugin-transform-class-properties
. 只有添加这四个组件,这样才能支持箭头函数写法。
那么我们该怎么做呢,首先当然是安装和下载babel-preset-es2015
,babel-preset-react
,babel-preset-stage-0
,babel-plugin-transform-class-properties
这四个组件了。
npm install --save-dev babel-preset-es2015 npm install --save-dev babel-preset-react npm install --save-dev babel-preset-stage-0 npm install --save-dev babel-plugin-transform-class-properties
然后,在根目录下添加.babelrc 文件,文件内容是
{ presets: [ "react","es2015","stage-0"], "plugins": ["transform-class-properties"] }
在然后,在webpack.config.js中添加配置。
module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=react,presets[]=es2015,presets[]=stage-0' } ] }
其中,这句 loader: 'babel-loader?presets[]=react,presets[]=es2015,presets[]=stage-0' 需要留意,而且顺序必须这样,不能错,要不然会报错。
ERROR in ./modules/Repos.js Module build failed: SyntaxError: E:/AllWorkSpace/react-router/trunk/lessons/01- setting-up/modules/Repos.js: Missing class properties transform. 2 | import {Link} from 'react-router'; 3 | export default class Repos extends Component{ > 4 | handleSubmit = () => { | ^ 5 | 6 | } 7 | render(){ @ ./index.js 19:13-39
好了,这样就可以为所欲为,随心所欲的使用自己喜爱的箭头函数写法了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。
文章题目:浅谈箭头函数写法在ReactJs中的使用
文章地址:http://myzitong.com/article/jcdchp.html