web-dev-qa-db-fra.com

Impossible d'utiliser les fonctions de flèche dans la classe de composants React

J'ai commencé un projet où j'utilise React JS pour le front end un noeud js dans le backend. J'ai utilisé webpack pour regrouper des fichiers JS. J'ai utilisé babel avec d'autres trucs nécessaires. Quand jamais j'utilise des fonctions flèches à l'intérieur d'une classe react, cela donne une erreur de syntaxe comme échec de la construction du module: SyntaxError: jeton inattend. Mais je peux utiliser la fonction flèche dans le noeud sans aucun problème.

c'est mon fichier de configuration webpack

import path from 'path';
import webpack from 'webpack';
import 'react-hot-loader/patch';

export default{
  devtool: 'eval',
  entry:[
    'react-hot-loader/patch',
    'webpack-hot-middleware/client?reload=true',
    path.join(__dirname,'client/index.js')],
  output:{
    path:'/',
    publicPath:'/'
  },
  plugins:[
    new webpack.NoErrorsPlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin()

  ],
  module:{
    loaders:[
      {
        test:/\.js$/,
        include:path.join(__dirname,'client'),
        loaders: ['react-hot-loader/webpack', 'babel']
      },
      {
        test: /\.jpe?g$|\.gif$|\.svg$|\.png$/i,
        loader: 'file-loader?name=[name].[ext]'
      }
    ]
  },
  resolve:{
    extension:['','.js']
  }
}

Mon fichier React

class mapSidebar extends React.Component{

    constructor(props,context){
       super(props,context);
       this.state = {
         dataSource: []
       };
         this.handleUpdateInput = this.handleUpdateInput.bind (this);
    }

    handleUpdateInput = (value) => {
      this.setState({
        dataSource: [
          value,
          value + value,
          value + value + value,
        ],
      });
    };

    render(){
      return(
        <div>
          <Paper zDepth={2}>
            <div>Hello</div>
            <div>
                <AutoComplete
                  hintText="Type anything"
                  dataSource={this.state.dataSource}
                  onUpdateInput={this.handleUpdateInput}
                />
          </Paper>
        </div>
      );
    }

}

export default mapSidebar;

Comment résoudre ce problème?

javascriptreactjsecmascript-6babeljsecmascript-next
17
TRomesh

Ce n'est pas la fonction flèche qui pose problème ici. Propriétés de classe ne font pas partie de la spécification ES6.

handleUpdateInput = (value) => {
  // ...
};

Si vous voulez pouvoir transformer ce code, vous devrez ajouter plugin babel des propriétés de classe .

Alternativement, cette transformation est fournie dans le cadre de Babel préréglage de l'étape 2 .

L'utilisation d'une fonction de flèche avec une propriété de classe garantit que la méthode est toujours invoquée avec le composant comme valeur pour this, ce qui signifie que la liaison manuelle ici est redondante.

this.handleUpdateInput = this.handleUpdateInput.bind (this);
41
Dan Prince

Ce n'est pas un problème de fonction de flèche mais en l'utilisant dans la déclaration de classe, ce code fonctionnera dans le corps du constructeur ou tout autre corps de fonction mais pas dans la déclaration de classe.

Le code devrait ressembler à ça:

handleUpdateInput(value){
  this.setState({
    dataSource: [
      value,
      value + value,
      value + value + value,
    ],
  });
};

L'utilisation de la fonction flèche peut être effectuée dans n'importe quelle méthode de classe, mais pas dans la déclaration de classe. Par exemple, en utilisant la fonction flèche dans le constructeur:

constructor(props,context){
   super(props,context);

   this.someFunc = ()=>{
     //here function code
   };
}
4
Maciej Sikora