Как создать заголовок неизвестного размера

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 внутри рамки, разрывы 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>; 
}) 

Таким образом, вам не нужно обертывать столбцы в промежутке. Вы создаете свой объект данных столбца, а затем проецируете эти столбцы, выводящие заголовок столбца. Таким образом, вы можете иметь динамические данные и операторы 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;