これは、react-bootstrap-table を実装する前の私の React クラスです (機能し、想定されている内容を出力します)。
class ResultItem extends ComponentBase {
constructor(props) {
super(props);
this.state = {
key: null,
description: '',
start_date: '',
end_date: '',
vendor_name: {},
buyer_name: {},
preview_file: '',
};
}
render() {
const data = this.props;
return (
<div>
{data.title}
{data.description}
{data.start_date}
{data.end_date}
{data.vendor_name}
{data.buyer_name}
</div>
);
}
}
この情報を react-bootstrap-table 内に表示したいと思います。これは、以下に示す私の試みた実装です。表には表示するデータがないと書かれているので、情報を正しく接続していないはずです。
class ResultItem extends ComponentBase {
constructor(props) {
super(props);
this.state = {
key: null,
description: '',
start_date: '',
end_date: '',
vendor_name: {},
buyer_name: {},
preview_file: '',
};
}
render() {
const data = this.props;
return (
<BootstrapTable data={this.props.data}>
<TableHeaderColumn dataField="title" isKey={true}>Title</TableHeaderColumn>
<TableHeaderColumn dataField="start_date">Start Date</TableHeaderColumn>
<TableHeaderColumn dataField="end_date">End Date</TableHeaderColumn>
<TableHeaderColumn dataField="vendor_name">Vendor</TableHeaderColumn>
<TableHeaderColumn dataField="buyer_name">Buyer</TableHeaderColumn>
</BootstrapTable>
);
}
}