Question

我的React componenet如下：

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>
  )
}

Answer 1

您是否使用F12键在浏览器的控制台日志中看到错误？从那里可以看到大多数错误。

Answer 2

第二个条件在关闭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>
        }

无法在渲染函数中使用条件进行编译

2 个答案: