Невозможно использовать функции Arrow внутри класса реагирующих компонентов

Question

Я начал проект, в котором я использую React JS для переднего конца узла js в backend. Я использовал webpack для сборки JS-файлов. Я использовал babel вместе с другими необходимыми вещами. Когда я использую функции стрелок внутри класса реакции, он дает синтаксическую ошибку. например Ошибка сборки модуля: СинтаксисError: Неожиданный токен. Но я могу использовать функцию Arrow в узле без каких-либо проблем.

это мой 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'] 
    } 
} 

Мой Реагировать файл

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; 

Как решить эту проблему?

Answer 1

Это не функция стрелки, которая вызывает здесь проблему. Class properties не входят в спецификацию ES6.

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

Если вы хотите, чтобы иметь возможность преобразовать этот код, вам нужно добавить class properties babel plugin.

В качестве альтернативы это преобразование предусмотрено как часть Babel's stage 2 preset.

Использование функции стрелки со свойством класса гарантирует, что метод всегда вызывается с компонентом как значение для this, что означает, что ручное восстановление здесь является избыточным.

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

Answer 2

Это не проблема функции стрелки, но ее использование внутри объявления класса, этот код будет работать в теле конструктора или в любом другом теле функции, но не в объявлении класса.

код должен выглядеть так же, как что:

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

Использование функции стрелка может быть сделано внутри метода класса, но не внутри декларации класса. Например, используя функцию стрелки в конструкторе:

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

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