1

我想在 react-bootstrap-table 中渲染按钮。但是，如果我将 React 组件作为内容传递，则表格将使用[object Object].

这是我到目前为止尝试过的代码：

// Imports
import React, { Component } from "react";
import { Link } from "react-router-dom";
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);

    // Defaults
    this.props.options.search = this.props.options.search ? true : false;
    this.props.options.pagination = this.props.options.pagination ? true : false;
  }

  // Option Buttons
  optionButtons = (cell, row) => {
    return cell.map(item => {
      let key = Object.keys(item)[0];
      return (
        <Link to={item[key]} className="btn btn-sm">
          {key}
        </Link>
      );
    });
  };

  // This works however
  // optionButtons = (cell, row) => {
  //   return <Link to="/some/route" className="btn btn-sm">Action</Link>;
  // };

  render() {
    let headings = this.props.columns.map((heading, index) => {
      let key = Object.keys(heading)[0];
      if (index === 0) {
        return (
          <TableHeaderColumn
            key={heading[key]}
            dataSort={heading.sortable ? true : false}
            dataField={key}
            width={
              heading.width && !isNaN(heading.width)
                ? heading.width.toString()
                : null
            }
            isKey
          >
            {heading[key]}
          </TableHeaderColumn>
        );
      }
      if (key === "options") {
        return (
          <TableHeaderColumn
            key={heading[key]}
            dataFormat={this.optionButtons}
            dataField={key}
            width={
              heading.width && !isNaN(heading.width)
                ? heading.width.toString()
                : null
            }
          >
            {heading[key]}
          </TableHeaderColumn>
        );
      }
      return (
        <TableHeaderColumn
          key={heading[key]}
          dataSort={heading.sortable ? true : false}
          dataField={key}
          width={
            heading.width && !isNaN(heading.width)
              ? heading.width.toString()
              : null
          }
        >
          {heading[key]}
        </TableHeaderColumn>
      );
    });

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

我传递给options键的数据是一个包含多个对象的数组。问题在于呈现选项按钮。这个想法是能够从组件传递我想要的按钮/链接的数量，并且它们将被呈现。

这是传递给options密钥的数据：

options: [
  { Edit: `/item/${item.id}/edit` },
  { Delete: `/item/${item.id}/delete` }
]
4

1 回答 1

2

看起来dataFormat需要一个值，将您的按钮包装到根元素（div例如）中，或者如果支持，则包装到片段中。

于 2018-02-13T10:50:11.613 回答