Question

我正在尝试动态生成<TableHeaderColumn>，这样无论我提供什么列和多少列，都会渲染它们。加载组件（使用搜索框和表体）而没有表头。我做错了什么？

以下是代码：

// Imports
import React, { Component } from "react";
import { BootstrapTable, TableHeaderColumn } from "react-bootstrap-table";
import "../../../node_modules/react-bootstrap-table/css/react-bootstrap-table.css";

// Exports
export default class Table extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    let headings;
    if (this.props.columns) {
      headings = this.props.columns.map((heading, index) => {
        let key = Object.keys(heading)[0];
        if (index === 0) {
          return <TableHeaderColumn key={heading[key]} dataField={heading[key]} isKey />
        }
        return <TableHeaderColumn key={heading[key]} dataField={heading[key]} />
      });
    }

    return (
      <BootstrapTable
        data={this.props.agentsList}
        search={this.props.options.search}
        pagination={this.props.options.pagination}
      >
        {headings}
      </BootstrapTable>
    );
  }
}

作为道具接收的数据是：

this.columns = [{ id: "ID" }, { name: "Name" }, { policies: "Policies" }];
this.options = { search: true, pagination: true };

我认为这是因为React中的渲染和重新渲染。我应该调用forceUpdate还是通过任何其他方式触发重新呈现组件？

Answer 1

好像你错过了专栏标题。请参阅the docs。

而是尝试使用

return <TableHeaderColumn key={heading[key]} dataField={heading[key]} isKey>{heading[key]}</TableHeaderColumn>

循环组件未显示在React中

1 个答案: