Javascript/Babel Реагировать Синтаксис для SomeFunction = (OnClick) => {

Question

Я в настоящее время использую React и реагировать-бутстраповскую-таблицу в моем проекте и документация предписывает мне использовать следующий метод:

createCustomExportCSVButton = (onClick) => { 
    return (
    <ExportCSVButton 
     className="action button-gray smaller right" 
     btnText="Export CSV 2" 
    /> 
); 
} 

Тем не менее, я получаю неожиданный маркер ошибки:

ERROR in ./project/web/frontend/static/js/CyhyTable.js 
Module build failed: SyntaxError: Unexpected token (67:29) 

    65 | } 
    66 | 
> 67 | createCustomExportCSVButton = (onClick) => { 
    |       ^
    68 |  return (
    69 |   <ExportCSVButton 
    70 |    className="action button-gray smaller right" 

Я не знаком с этим синтаксисом, и каждый раз, когда я пытаюсь и Google его запрос кажется игнорировать «=>» часть так им не совсем уверен, что назвать этим типом функции. Я использую webpack для компиляции реагирующих ресурсов frontend, может быть, это проблема с моим файлом webpack?

var webpack = require('webpack'); 

module.exports = { 
    entry: [ 
    "./project/web/frontend/static/bower_components/jquery/dist/jquery.min.js", 
    "./project/web/frontend/static/js/app.js", 

    "./project/web/frontend/static/js/flakes/base.js", 

    ], 
    output: { 
    path: __dirname + '/project/web/frontend/static/js', 
    filename: "bundle.js" 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.js?$/, 
     loader: 'babel-loader', 
     query: { 
      presets: ['es2015', 'react'] 
     }, 
     exclude: /node_modules/, 
     }, 
     {test: /\.jsx$/, loader: 'jsx-loader'}, 

    ] 
    }, 
    plugins: [ 
    new webpack.ProvidePlugin({ 
     $: "jquery", 
     jQuery: "jquery" 
    }) 
    ] 
}; 

Вот полный CyhyTable JSX:

/* eslint max-len: 0 */ 
/* eslint no-unused-vars: 0 */ 
/* eslint no-alert: 0 */ 
var React = require('react'); 
var ReactDOM = require('react-dom'); 
var ReactBsTable = require('react-bootstrap-table'); 
var BootstrapTable = ReactBsTable.BootstrapTable; 
var TableHeaderColumn = ReactBsTable.TableHeaderColumn; 



var rowsSelected = [] 

function onRowSelect(row, isSelected, e) { 
    let rowStr = ''; 
    for(const prop in row) { 
    rowStr += prop + ': "' + row[prop] + "'"; 
    } 
    rowsSelected.push(row); 
    console.log(rowsSelected); 
} 

class CyhyTableSearch extends React.Component { 

    getValue() { 
    return ReactDOM.findDOMNode(this).value; 
    } 

    setValue(value) { 
    ReactDOM.findDOMNode(this).value = value; 
    } 

    render() { 
    return (

     <div className="flakes-search"> 
     <input 
      ref="searchInput" 
      className="search-box" 
      placeholder={ "Enter Value for Search.." } 
      defaultValue={ this.props.defaultValue } 
      onKeyUp={ this.props.search } /> 

     <div className="flakes-actions-bar"> 
      <button className="action button-gray smaller right"> DDI Selected</button> 
      <button name="csvExport" className="action button-gray smaller right">Export CSV</button> 
     </div> 
     </div> 
    ); 
    } 
} 



class CyhyTable extends React.Component { 

    csvFormatter(cell, row) { 
    return `${row.id}: ${cell} USD`; 
    } 

    renderShowsTotal(start, to, total) { 
    return (
     <div className="flakes-pagination-right"></div> 
    ); 
    } 

    createCustomExportCSVButton = (onClick) => { 
    return (
     <ExportCSVButton 
     className="action button-gray smaller right" 
     btnText="Export CSV 2" 
     /> 
    ); 
    } 

    onExportToCSV(row) { 
    return rowsSelected; 
    } 

    render() { 
    const selectRowProp = { 
     mode: 'checkbox', 
     onSelect: onRowSelect 
    }; 

    const options = { 
     clearSearch: false, 
     searchPanel: (props) => (<CyhyTableSearch { ...props }/>), 
     page: 1, // which page you want to show as default 
     sizePerPage: 25, // which size per page you want to locate as default 
     pageStartIndex: 0, // where to start counting the pages 
     paginationSize: 3, // the pagination bar size. 
     prePage: 'Prev', // Previous page button text 
     nextPage: 'Next', // Next page button text 
     firstPage: 'First', // First page button text 
     lastPage: 'Last', // Last page button text 
     onExportToCSV: this.onExportToCSV, 
     exportCSVText: 'test', 
     exportCSVBtn: this.createCustomExportCSVButton, 
     paginationShowsTotal: this.renderShowsTotal, 
     sizePerPageList: [ { 
     text: '5', value: 5 
     }, { 
     text: '10', value: 10 
     }, {  
     text: '15', value: 15 
     }, { 
     text: '25', value: 25 
     }, { 
     text: '50', value: 50 
     }, { 
     text: '100', value: 100 
     }, { 
     text: 'All', value: cyhyData.length 
     } ],  
    }; 

    return ( 
     <BootstrapTable 
     data={ cyhyData } 
     options={ options } 
     selectRow={ selectRowProp } 
     exportCSV={ true } 
     pagination={ true } 
     tableHeaderClass='flakes-table' 
     tableBodyClass='flakes-table' 
     containerClass='flakes-table' 
     tableContainerClass='flakes-table' 
     headerContainerClass='flakes-table' 
     bodyContainerClass='flakes-table' 
     search > 

     <TableHeaderColumn isKey={true} dataField='id' hidden={true}>id</TableHeaderColumn> 
     <TableHeaderColumn dataField='Severity'>Severity</TableHeaderColumn> 
     <TableHeaderColumn dataField='IP'>IP</TableHeaderColumn> 
     <TableHeaderColumn dataField='Port'>Port</TableHeaderColumn> 
     <TableHeaderColumn dataField='DNS'>DNS</TableHeaderColumn> 
     <TableHeaderColumn dataField='vulnName'>Vulnerability</TableHeaderColumn> 
     </BootstrapTable> 
    ); 
    } 
} 

module.exports = CyhyTable; 

Answer 1

(Добавлено решение от имени ОП).

необходимо добавить следующее WebPack:

presets: [require.resolve('babel-preset-es2015'), 'react', 'stage-2'], 
plugins: [require.resolve('babel-plugin-transform-runtime')] 

Answer 2

Вам необходимо обновить Бабель пресеты, чтобы иметь возможность использовать эту функцию.

Измените 'es2015' на 'latest', а также добавьте 'stage-2' в предварительные настройки babel. в вашей конфигурации webpack под вашим загрузчиком. Это гарантирует, что вы получите правильные функции транспиляции, чтобы сделать эту работу. Я думаю, что stage-2 - единственное, что вам нужно для этого экземпляра, но если вы планируете использовать самую последнюю версию ES *, то последняя будет тянуть за вас.

presets: [ 
      'stage-2', 
      'latest', 
      'react' 
     ]