Невозможно отобразить элемент React в 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` }
]

person Ajay    schedule 13.02.2018    source источник
comment
@Yurii, пожалуйста, добавьте свой комментарий в качестве ответа. Хотя я читаю это уже после того, как разобрался :D Спасибо!   -  person Ajay    schedule 13.02.2018
comment
Привет, @Ajay, ты нашел решение? если да поделитесь.   -  person Ravi Saxena    schedule 25.03.2020
comment
@RaviSaxena Я действительно не помню, это было года 2 назад. Но я посмотрю код и вернусь к вам.   -  person Ajay    schedule 25.03.2020
comment
я получил решение. Ниже ответ правильный. Спасибо за ваш ответ.   -  person Ravi Saxena    schedule 26.03.2020


Ответы (1)


Похоже, что dataFormat ожидает одно значение, поместите ваши кнопки в корневой элемент (например, div) или в фрагмент, если он поддерживается.

person Yurii    schedule 13.02.2018