ReactJs의 화살표 기능 사용 분석

이 글은 주로 ReactJs에서 화살표 함수를 작성하는 방법을 소개합니다. 관심 있는 친구들이 참고하면 좋을 것 같습니다.

ES7의 화살표 함수 작성 방법은 정말 편리하고, 이제는 ReactJs에서도 매우 인기 있고 쉽습니다. Java 객체 지향 경험이 있는 학생들이 배우고 사용하기에 매우 적합합니다.Reacjs를 사용하여 구성 요소를 만들 때 화살표 함수 작성을 사용하여 함수를 정의하려면 어떻게 해야 합니까?

먼저 화살표 함수를 사용하여 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

위에서 언급한 것처럼 handlerSubmit 함수 정의가 실패했는데 어떻게 Reactjs 프로젝트에서 화살표 함수 작성을 지원하게 할 수 있나요? 답은 babel-preset-es2015,babel-preset-React,babel-입니다. Preset-stage-0,babel-plugin-transform-class-properties. 이 4가지 구성 요소를 추가해야만 화살표 함수 작성 방법을 지원할 수 있습니다. 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

그럼 먼저 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' 
    }
   ]
  }

그 중에서 이 문장 로더: '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의 화살표 기능 사용 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!