0

给定

   import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
    import React from 'react';

    var products = [{
        id: 1,
        name: "Item name 1",
        price: 100
    },{
        id: 2,
        name: "Item name 2",
        price: 100
    },];

    var DataTable = React.createClass({
       //This is not for-real dynamic.  If I can't wrap
       //N # of TableHeaderColumn's in a span then I can't solve the problem
      generateHeader(){
        return (
          <span>
            <TableHeaderColumn dataField="id" isKey={true} dataAlign="center" dataSort={true}>Product ID</TableHeaderColumn>
            <TableHeaderColumn dataField="name" dataSort={true}>Product Name</TableHeaderColumn>
            <TableHeaderColumn dataField="price" dataFormat={this.priceFormatter}>Product Price</TableHeaderColumn>
          </span>
        );
      },
      // It's a data format example.
      priceFormatter(cell, row){
        return '<i class="glyphicon glyphicon-usd"></i> ' + cell;
      },

      render: function() {
        return (
          <BootstrapTable data={products} striped={true} hover={true}>
            <TableHeaderColumn dataField="id" isKey={true} dataAlign="center" dataSort={true}>Product ID</TableHeaderColumn>
            <TableHeaderColumn dataField="name" dataSort={true}>Product Name</TableHeaderColumn>
            <TableHeaderColumn dataField="price" dataFormat={this.priceFormatter}>Product Price</TableHeaderColumn>
          </BootstrapTable>
        );
      }
    });

module.exports = DataTable;

我不能打电话generateHeader()，因为在这种情况下，react 要求我将所有东西都包装在一个父级<span>中。当我将 TableHeaderColumn 放在 span 内时，BootstrapTable 会中断。

如何生成动态标题？

4

1 回答 1

1

查看引导表代码，看起来您不允许将列包装在任何东西中。我认为您将需要重新设计您的 generateHeader() 以循环并返回各个列。就像是

const cols = { //object or array
  {
    dataField: "id",
    value: "Product ID",
  },
  {}, ...
}
cols.map((col) => {
   return <TableHeaderColumn dataField={col.dataField}>{col.value}</TableHeaderColumn>;
})

这样您就不需要将列包装在跨度中。您创建列数据的对象，然后遍历输出列标题的那些列。这样，如果需要，您可以拥有动态数据和 if/else 语句。

我还想澄清一下，React 只需要返回一个标签，它不需要是<span>. 我想向您展示一种呈现列的方法，只是为了向您展示您可以在 generateHeader() 中做什么。

  renderColumns(cols) {
    return (cols) ?
      cols.map((column) => {
        // You can set consts
        const style = Object.assign({}, styleObj.body2, styles.col, column.style);
        // You can use if statements
        if (typeof column == "string") {
          return <TableHeaderColumn style={style} key={column}>{column}</TableHeaderColumn>;
        } else {
          return <TableHeaderColumn style={style} key={column.columnHeader}>{column.columnHeader}</TableHeaderColumn>;
        }
      })
    : null; // If no columns return null
  }

这是一个更“完整”的示例

import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
import React from 'react';

var products = [{
    id: 1,
    name: "Item name 1",
    price: 100
},{
    id: 2,
    name: "Item name 2",
    price: 100
},];

var DataTable = React.createClass({
   //This is not for-real dynamic.  If I can't wrap
   //N # of TableHeaderColumn's in a span then I can't solve the problem
  generateHeader(){
    const cols = {
      {
        dataField: "id",
        value: "Product ID",
      }
    }
    cols.map((col) => {
       return <TableHeaderColumn dataField={col.dataField}>{col.value}</TableHeaderColumn>;
    })
  },
  // It's a data format example.
  priceFormatter(cell, row){
    return '<i class="glyphicon glyphicon-usd"></i> ' + cell;
  },

  render: function() {
    return (
      <BootstrapTable data={products} striped={true} hover={true}>
        {this.generateHeader()}
      </BootstrapTable>
    );
  }
});

module.exports = DataTable;
于 2016-06-03T21:00:04.160 回答