Analyser l'utilisation des fonctions fléchées dans ReactJs

Cet article présente principalement l'utilisation de l'écriture de fonctions fléchées dans ReactJs. Il a une certaine valeur de référence. Les amis intéressés peuvent se référer à

La méthode d'écriture de fonctions fléchées dans ES7 est vraiment très pratique, et ReactJs l'est. très populaire et facile à utiliser de nos jours. Il est très approprié pour les étudiants ayant une expérience orientée objet Java d'apprendre et de l'utiliser. Lorsque j'utilise Reacjs pour créer des composants, que dois-je faire si je souhaite utiliser l'écriture de fonctions fléchées pour définir des fonctions ?

Tout d'abord, si vous utilisez des fonctions fléchées pour définir des fonctions directement dans les composants React, la compilation ne passera pas et une erreur de syntaxe sera signalée.

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

Comme mentionné ci-dessus, la définition de la fonction handleSubmit a échoué, alors comment pouvez-vous faire en sorte que votre projet reactjs prenne en charge l'écriture de la fonction flèche ? .Ce n'est qu'en ajoutant ces quatre composants que la méthode d'écriture de la fonction flèche peut être prise en charge. babel-preset-es2015,babel-preset-React,babel-preset-stage-0,babel-plugin-transform-class-properties

Alors que devons-nous faire ? La première chose est d'installer et de télécharger les quatre composants

, 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

Ensuite, ajoutez le fichier .babelrc dans le répertoire racine. Le contenu du fichier est

Ensuite, ajoutez la configuration dans webpack.config.js.

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

Parmi eux, ce chargeur : 'babel-loader?presets[]=react,presets[]=es2015,presets[]=stage-0' est requis Faites attention, et la commande doit être comme ça, ne peut pas être fausse, sinon une erreur sera signalée.

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

D'accord, vous pouvez maintenant faire ce que vous voulez et utiliser votre méthode d'écriture de fonction fléchée préférée.

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!