Question

鉴于

   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()，因为在这种情况下，反应要求我将所有内容都包装在父<span>中。当我将TableHeaderColumn放入span内时，BootstrapTable会中断。

如何生成动态标头？

Answer 1

查看引导程序表代码，看起来不允许将列包装在任何内容中。我认为你需要重新编写你的generateHeader（）来循环并返回各个列。像

这样的东西

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

这样您就不需要在span中包装列。您创建列数据的对象，然后循环输出列标题的列。这样，如果需要，您可以拥有动态数据和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;

如何生成未知大小的标头

1 个答案: