javascript - react - No se pueden usar las funciones de flecha dentro de la clase de componente reaccionar

funcion flecha javascript if

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Cómo usar las funciones de flecha (campos de clase pública) como métodos de clase? 4 respuestas

Comencé un proyecto donde uso React JS para el front end de un nodo js en el backend. Usé webpack para agrupar archivos JS. Usé Babel junto con otras cosas necesarias. Cuando uso las funciones de flecha dentro de una clase de reacción, aparece un error de sintaxis. like Módulo de construcción fallido: SyntaxError: token inesperado . Pero puedo usar la función de flecha en el nodo sin ningún problema.

este es mi archivo de configuración 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'']
  }
}

Mi archivo de reacción

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;

Cómo resolver este problema?

Answer 1

No es la función de flecha lo que está causando un problema aquí. Las propiedades de clase no son parte de la especificación ES6.

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

Si desea poder transformar este código, deberá agregar el complemento babel de propiedades de clase .

Alternativamente, esta transformación se proporciona como parte del preajuste de la etapa 2 de Babel.

El uso de una función de flecha con una propiedad de clase asegura que el método siempre se invoque con el componente como valor para this , lo que significa que el reenlace manual aquí es redundante.

this.handleUpdateInput = this.handleUpdateInput.bind (this);

Answer 2

No es un problema de la función de flecha, pero al usarlo dentro de la declaración de clase, este código funcionará en el cuerpo del constructor o en cualquier otro cuerpo de función, pero no en la declaración de la clase.

El código debería verse así:

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

El uso de la función de flecha se puede hacer dentro de cualquier método de clase, pero no dentro de la declaración de clase. Por ejemplo, usando la función de flecha en el constructor:

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

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