Analyse der Verwendung von Pfeilfunktionen in ReactJs

Dieser Artikel stellt hauptsächlich die Verwendung des Schreibens von Pfeilfunktionen in ReactJs vor. Interessierte Freunde können sich auf

Die Methode zum Schreiben von Pfeilfunktionen in ES7 ist wirklich sehr praktisch, und ReactJs ist es Heutzutage ist es sehr beliebt und einfach zu verwenden. Es ist sehr gut für Studenten mit objektorientierter Java-Erfahrung geeignet. Was soll ich tun, wenn ich Reacjs zum Erstellen von Komponenten verwende?

Wenn Sie Pfeilfunktionen verwenden, um Funktionen direkt in React-Komponenten zu definieren, schlägt die Kompilierung zunächst fehl und es wird ein Syntaxfehler gemeldet.

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

Wie oben erwähnt, ist die Definition der handleSubmit-Funktion fehlgeschlagen. Wie können Sie also dafür sorgen, dass Ihr ReactJS-Projekt das Schreiben von Pfeilfunktionen unterstützt? Nur durch Hinzufügen dieser vier Komponenten kann die Schreibmethode für Pfeilfunktionen unterstützt werden. babel-preset-es2015,babel-preset-React,babel-preset-stage-0,babel-plugin-transform-class-properties

Was sollen wir also tun? Als Erstes müssen wir die vier Komponenten

, babel-preset-es2015, babel-preset-react, babel-preset-stage-0 installieren und herunterladen. 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

Fügen Sie dann die .babelrc-Datei im Stammverzeichnis hinzu. Der Inhalt der Datei ist

{
  presets: [ "react","es2015","stage-0"],
  "plugins": ["transform-class-properties"]
}

Fügen Sie dann die Konfiguration in webpack.config.js hinzu.

module: {
   loaders: [
    { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: 'babel-loader?presets[]=react,presets[]=es2015,presets[]=stage-0' 
    }
   ]
  }

Unter ihnen ist dieser Loader: 'babel-loader?presets[]=react,presets[]=es2015,presets[]=stage-0' erforderlich Passen Sie auf, und die Reihenfolge muss so sein, es darf nicht falsch sein, sonst wird ein Fehler gemeldet.

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

Okay, jetzt können Sie tun und lassen, was Sie wollen, und Ihre bevorzugte Schreibmethode für Pfeilfunktionen verwenden.

Das obige ist der detaillierte Inhalt vonAnalyse der Verwendung von Pfeilfunktionen in ReactJs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!