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

时间:2016-12-06 16:31:26

标签: reactjs webpack react-bootstrap-table

我目前在我的项目中使用React和react-bootstrap-table,文档指示我使用以下方法:

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"

我不熟悉这种语法,每当我尝试谷歌时,查询似乎都会忽略&#39; =&gt;&#39;部分所以我不确定该怎么称呼这种功能。我使用webpack编译反应前端资产,这可能是我的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;

2 个答案:

答案 0 :(得分:1)

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

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

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

答案 1 :(得分:0)

(代表OP发布解决方案)

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

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