Javascript/Babel someFunction = (onClick) => { 的 React 语法

Question

我目前在我的项目中使用 React 和 react-bootstrap-tables，文档指示我使用以下方法：

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 编译 react 前端资源，会不会是我的 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

您需要更新您的 babel 预设才能使用该功能。

将 'es2015' 更改为 'latest' 并将 'stage-2' 添加到 babel 预设中。在你的 babel 加载器下的 webpack 配置中。这将确保您获得正确的转译功能来完成这项工作。我认为 stage-2 是这个实例唯一需要的阶段，但如果您计划使用最新的 ES*，那么 latest 将为您提供。

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

Answer 2

(代表OP发布解决方案).

需要将以下内容添加到 webpack:

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

Javascript/Babel someFunction = (onClick) => { 的 React 语法

Javascript/Babel React Syntax for someFunction = (onClick) => {

reactjs

webpack

react-bootstrap-table