使用动态标题/反应创建引导表 [英] Creating a bootstrapTable with dynamic headers / React

问题描述

我正在尝试在类中呈现带有动态标题的 BootstrapTable.我的班级是一个只有这张表的网格.我从 Bootstrap 获得了代码，并毫无问题地呈现了一个带有标题的表格.这里的问题是我不知道我的表将有多少标题以及它将包含哪些信息.我尝试在返回时运行 for() 但 React 阻止我这样做.我只想渲染一个 但多个 .

我的一段代码，如果有帮助的话:(我正在使用 React)

这段代码显示了 TableHeaderColumns 现在的状态，当然，当它们是动态的时，我只需要调用函数 initiateHeaders

render() {console.log("actionsGrid 道具:", this.props);函数initialHeaders(totalCount){for(let i=0; i要求 #</TableHeaderColumn><TableHeaderColumn dataField='process' dataSort={true}>过程</TableHeaderColumn><TableHeaderColumn dataField='action' dataFormat={actionFormatter} dataSort={true}>行动</TableHeaderColumn><TableHeaderColumn dataField='created' dataSort={true}>已创建</TableHeaderColumn><TableHeaderColumn dataField='timeLimit' dataFormat={timeLimitFormatter} dataSort={true}>时限</TableHeaderColumn><TableHeaderColumn dataField='subject' dataSort={true}>主题</TableHeaderColumn><TableHeaderColumn dataField='approval_1' dataSort={true}>一级批准</TableHeaderColumn>{initiateHeaders(6)}</BootstrapTable>

);}函数 createColumns(totalCount) {返回(<TableHeaderColumn dataField='data' dataSort={true}>标题在这里</TableHeaderColumn>)}

目前，createColumns 函数不是动态的，但我会在代码运行时更改其中的信息.

谢谢

TL.DR:获取信息以在 bootstrapTable 中制作标头，但标头的数量因过程而异.需要动态渲染它们.

解决方案

我认为您正在寻找的是 Array.prototype.map 函数.我不确定您的其余代码是什么样的，但假设保存所有列数据的对象称为 columnData:

render() {const tableHeaderColumns = this.props.columnData.map((column) => (<表头列数据字段={column.action}数据格式={column.actionFormatter}dataSort={column.dataSort}>{column.description}</TableHeaderColumn>))返回 (<div><BootstrapTable 悬停数据={action}>{tableHeaderColumns}</BootstrapTable>

)}

这是 React 中常见的设计模式.例如，Array.prototype.map() 和 Array.prototype.filter() 的使用比 for 循环要多得多.不改变数据对于优化 React 的性能很重要，这也是原因之一.

I'm trying to render a BootstrapTable with dynamic headers in a class. My class is a grid with only this table in it. I got code from Bootstrap and rendered a table with headers with no problem. The thing here is I don't know how many headers my table will have and what information it will contain. I tried running a for() in my return but React blocks me from doing so. I want to render only one < BoostrapTable> but multiple < TableHeaderColumn>.

A piece of my code if it helps: (I'm using React)

This code shows how the TableHeaderColumns are right now but of course when they are dynamic, I should only need to call the function initiateHeaders

render () {
console.log("actionsGrid Props:  ", this.props);

function initiateHeaders(totalCount) {
  for(let i=0; i<totalCount; i++) {
    createColumns(i);
  }
}
return (
  <div>
    <BootstrapTable hover data={action} pagination>
      <TableHeaderColumn dataField='actionId' dataFormat={actionIdFormatter}
        isKey
        dataSort={true}>
        Request #
      </TableHeaderColumn>
      <TableHeaderColumn dataField='process' dataSort={true}>
        Process
      </TableHeaderColumn>
      <TableHeaderColumn dataField='action' dataFormat={actionFormatter} dataSort={true}>
        Action
      </TableHeaderColumn>
      <TableHeaderColumn dataField='created' dataSort={true}>
        Created
      </TableHeaderColumn>
      <TableHeaderColumn dataField='timeLimit' dataFormat={timeLimitFormatter} dataSort={true}>
        TimeLimit
      </TableHeaderColumn>
      <TableHeaderColumn dataField='subject' dataSort={true}>
        Subject
      </TableHeaderColumn>
      <TableHeaderColumn dataField='approval_1' dataSort={true}>
        Approval of the Level 1
      </TableHeaderColumn>
      {initiateHeaders(6)}
    </BootstrapTable>
  </div>
);
}

function createColumns(totalCount) {

  return(
    <TableHeaderColumn dataField='data' dataSort={true}>
            Title here
    </TableHeaderColumn>
  )
}

For now, the createColumns function isn't dynamic but I'll change the info in it when the code works.

Thank you

EDIT:

TL.DR: Fetching information to make headers in a bootstrapTable but the number of headers change depending on the process. Need to render them dynamically.

解决方案

I think what you are looking for is the Array.prototype.map function. I'm not sure what the rest of your code looks like, but this is generally how you could build your table header columns, assuming the object that holds all your column data is called columnData:

render() {
  const tableHeaderColumns = this.props.columnData.map((column) => (
    <TableHeaderColumn 
      dataField={column.action} 
      dataFormat={column.actionFormatter}
      dataSort={column.dataSort}
    >
      {column.description}
    </TableHeaderColumn>
  ))

  return (
    <div>
      <BootstrapTable hover data={action}>
        {tableHeaderColumns}
      </BootstrapTable>
    </div>
  )
}

This is a common design pattern in React. Array.prototype.map() and Array.prototype.filter() are used much more than for loops, for example. Not mutating data is important to optimize performance in React, so that is part of the reason why.

这篇关于使用动态标题/反应创建引导表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！