代码之家 › 专栏 › 技术社区 › tesicg

编译失败,呈现函数中有条件

reactjs

tesicg · 技术社区 · 6 年前

我的React组件如下:

class OrdersTable extends React.Component {

    this.state = {
      isFetching = false,
      ...
    }

    render () {
      return (
        <div className="content-wrapper">
          <div className="content-left">
            {this.state.isFetching ?
              <div>
                Loading data...
              </div>
              :
              <div>
                <BootstrapTable keyField='id' data={this.state.orders} columns={this.state.columns}
                  rowStyle = {this.state.rowStyle} rowEvents={this.rowEvents}
                  caption={<CaptionOrders title="Orders" />} noDataIndication={<NoData />} {...this.props} />
                <Legend />
              <div>
            }
          </div>
          <div className="content-right">
            <ProductsTable data={this.state.products} orderId={this.state.rowId} />
          </div>
        </div>
      )
    }
}

但是,在呈现函数中有一些错误。我不知道在哪里。

编辑1:

我没有发布错误,因为它与呈现函数中的错误没有直接的联系。就是这样:

Failed to compile.

./src/OrdersTable.js
Syntax error: D:/Programiranje/Code/React/working/bootstrap_table_axios_state_js/my-app/src/OrdersTable.js: Unexpected token, expected , (25:23)

  23 |         dataField: 'Id',
  24 |         text: 'Order ID',
> 25 |         formatter: this.idFormatter
     |                        ^
  26 |       }, {
  27 |         dataField: 'Date',
  28 |         text: 'Date',

编辑2:

使用以下代码,一切正常:

render () {
  return (
    <div className="content-wrapper">
      <div className="content-left">
        <BootstrapTable keyField='id' data={this.state.orders} columns={this.state.columns}
          rowStyle = {this.state.rowStyle} rowEvents={this.rowEvents}
          caption={<CaptionOrders title="Orders" />} noDataIndication={<NoData />} {...this.props} />
        <Legend />
      </div>
      <div className="content-right">
        <ProductsTable data={this.state.products} orderId={this.state.rowId} />
      </div>
    </div>
  )
}

2 回复 | 直到 6 年前

Dominion 6 年前

第二个条件在关闭DIV标记时出错。正确版本:

       { this.state.isFetching ?
          <div>
            Loading data...
          </div>
          :
          <div>
            <BootstrapTable keyField='id' data={this.state.orders} columns={this.state.columns}
              rowStyle = {this.state.rowStyle} rowEvents={this.rowEvents}
              caption={<CaptionOrders title="Orders" />} noDataIndication={<NoData />} {...this.props} />
            <Legend />
          </div>
        }