javascript - 使用工具提示反应引导表

Question

我正在使用反应引导表来显示存储在info数组中的一些数据。

<BootstrapTable data={info} striped={true} hover={true} search={true} condensed={true} selectRow={selectRowProp(onRowSelect, info, selected)}>
    <TableHeaderColumn isKey={true} dataField="name"> Name </TableHeaderColumn>
    <TableHeaderColumn dataField="class"> Class </TableHeaderColumn>
    <TableHeaderColumn dataFormat={myStyle} dataField="price"> Price </TableHeaderColumn>
</BootstrapTable>

有些行可能有一个额外的属性oldPrice，我想将其显示为显示价格的工具提示。我怎样才能做到这一点？

Answer 1

相关，如果要在悬停时显示单元格的值，则需要编写一个小函数：

const columnHover = (cell, row, enumObject, rowIndex) => {
    return cell
  }

<TableHeaderColumn
    width='260px'
    dataField='cellContents'
    editable={false}
    dataSort
    columnTitle={columnHover}
    >
    Some text
</TableHeaderColumn>

Answer 2

您可以将columnTitle属性用作 columnTitle="Put your old price here"

<TableHeaderColumn dataFormat={myStyle} dataField="price" columnTitle="Put your old price here"> Price </TableHeaderColumn>

Answer 3

在 BootstrapTable 之外设置您的工具提示组件。使用 TableHeaderColumn 上的 columnClassName 属性为您的价格单元格提供一个类，您可以使用 tether 将工具提示附加到该类。