如何在 react-bootstrap-table-next 中控制布尔字段

Question

假设在 API 中我有一个布尔值，例如。 mission_status：真，或 mission_status：假。我使用 react-bootstrap-table2 来创建 table。因为它将对象数组中的任何数据复制到 table 行中。
如果 mission_status 为真，我想在 Table 中显示“成功”，如果 mission_status 为假，我想显示“失败”。目前只显示true和false。

const columns = [
    { dataField:"flight_number", text:"No." };
    { dataField:"mission_name", text:"Mission" },
    { dataField:"mission_status", text:"Mission Status" },
    { dataField:"rocket.rocket_name", text:"Rocket" }
]

这是 jsx 部分：

<BootstrapTable 
            keyField="flight_number"
            data={launch}
            columns={columns}
            pagination={paginationFactory()}

        />

如果 table 为真，我希望任务状态为“成功”，反之亦然。
如何实现请帮忙？？

Answer 1

您可以使用 formatter 来实现

// Add formatter properties to the cell
const columns = [
    ...,
    { 
        dataField:"mission_status", 
        text:"Mission Status", 
        formatter: statusFormatter 
    },
    ...
]

// Process the returned data in the formatter
function statusFormatter(cell, row, rowIndex, formatExtraData) {
    return cell ? 'Success' : 'Failure'
}

formatter 将有 4 个参数可用。 cell 是传递给格式化程序的数据，row 是该行的整个数据对象。

您可以在文档中阅读更多相关信息： https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columnformatter-function

如何在 react-bootstrap-table-next 中控制布尔字段

How to Control boolean field in react-bootstrap-table-next

javascript

datatable

reactjs

bootstrap-4

react-bootstrap-table