reactjs - 如何使用 react-bootstrap-table 打破标签

Question

我的桌子是：

<BootstrapTable data={props.workbooks} striped={true} hover={true}>
  <TableHeaderColumn
    dataField="id"
    isKey={true}
    dataAlign="center"
    columnClassName={ props.tdClassFormatter }
    width='50px'>
    ID
  </TableHeaderColumn>
  <TableHeaderColumn dataField="createdAt" width='130px' dataFormat={(cDate) => moment(cDate).format('MMM D, \'YY (h:mm a)')}>Created On</TableHeaderColumn>
  <TableHeaderColumn dataField="status" width='90px' hidden={props.minimized}>Status</TableHeaderColumn>
  <TableHeaderColumn dataField="subject" width='90px' hidden={props.minimized}>Subject</TableHeaderColumn>
  <TableHeaderColumn dataField="results" dataFormat={this.resultsFormatter} dataAlign="center">
    Total /
    <span className="text-info">Attempted</span> /
    <span className="text-success">✓&lt;/span> /
    <span className="text-danger">✗&lt;/span> /
    <span className="text-muted">Skip</span>
  </TableHeaderColumn>
  <TableHeaderColumn dataField="skills" dataFormat={this.skillsFormatter}>Skills</TableHeaderColumn>
  <TableHeaderColumn dataField="id" dataFormat={this.actionFormatter} dataAlign="center" hidden={props.minimized}></TableHeaderColumn>
</BootstrapTable>

并且this.skillsFormatter是：

  skillsFormatter(skills) {
    const skillHTML = skills.map((skill, index) => {
      return (
        <span key={index}>
          <Label bsStyle="default">{skill}</Label>&nbsp;
        </span>
      )
    })
    return (
      <div className="text-center">
        {skillHTML}
      </div>
    )
  }

但我希望标签换行而不是这样：

我怎样才能做到这一点？

Answer 1

尝试将 CSS 样式添加overflow-wrap: break-word到您的skillsFormatter. 这个“应该”导致那些技能元素被包裹起来。

  skillsFormatter(skills) {
    const skillHTML = skills.map((skill, index) => {
      return (
        <span key={index}>
          <Label bsStyle="default">{skill}</Label>&nbsp;
        </span>
      )
    })
    return (
      <div className="text-center" style={{overflowWrap:'break-word'}}>
        {skillHTML}
      </div>
    )
  }

您可能还必须在此列上设置固定宽度。

<TableHeaderColumn dataField="skills" width="300px" dataFormat={this.skillsFormatter}>Skills</TableHeaderColumn>