Question

我尝试在类中使用动态标头呈现BootstrapTable。我的类是一个只有这个表的网格。我从Bootstrap获取代码并呈现带有标题的表没有问题。这里的事情是我不知道我的表将有多少标题以及它将包含哪些信息。我尝试在返回时运行for（），但React阻止我这样做。我想只渲染一个＆lt; BoostrapTable＆gt; 但多个＆lt; TableHeaderColumn＆GT;

我的代码如果有帮助:(我使用React）

此代码显示了TableHeaderColumns现在如何，但当然它们是动态的时候，我只需要调用函数 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>
  )
}

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

谢谢

编辑：

TL.DR：获取信息以在bootstrapTable中生成标题，但标题数会根据进程而变化。需要动态渲染它们。

Answer 1

我认为您正在寻找的是Array.prototype.map功能。我不确定代码的其余部分是什么样的，但这通常是如何构建表头列的，假设保存所有列数据的对象被称为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>
  )
}

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

使用动态标头/ React创建bootstrapTable

1 个答案: