[英]Not able to render a React element in React-BootStrap-Table
I want to render buttons in react-bootstrap-table. 我想在react-bootstrap-table中渲染按钮。 However, If I pass a React component as the content, the table is render with [object Object]
. 但是,如果我将React组件作为内容传递,则该表将使用[object Object]
呈现。
Here's the code I've tried so far: 这是到目前为止我尝试过的代码:
// 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>
);
}
}
The data I am passing to the options
key is an array with multiple objects. 我传递给options
键的数据是一个包含多个对象的数组。 The problem is in rendering the option buttons. 问题在于渲染选项按钮。 The idea is to be able to pass the number of buttons/link I want from a component and they will be rendered. 这个想法是为了能够传递我想要的来自组件的按钮/链接的数量,它们将被渲染。
This is the data being passed to the options
key: 这是传递给options
键的数据:
options: [
{ Edit: `/item/${item.id}/edit` },
{ Delete: `/item/${item.id}/delete` }
]
看起来dataFormat
需要单个值,将按钮包装到根元素(例如div
)中,或者包装到片段(如果支持)中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.