反应引导覆盖触发器和工具提示错误

问题描述

我尝试在一个格式化程序中使用Reaction-Bootstrap OverlayTrigger和工具提示，但一直收到以下错误：

相关代码如下：

import {Button, DropdownButton, MenuItem, Modal,
    OverlayTrigger, Tooltip} from 'react-bootstrap';

....

const submitterFormatter = (submitter, row) => {
  return (
    <OverlayTrigger placement="bottom" overlay={toolTipComponent(submitter, row)}>
      {submitter}
    </OverlayTrigger>
  );
};

const toolTipComponent = (toolTipText, row) => {
  return (
    <Tooltip id={String(row.id)}>
      {toolTipText}
    </Tooltip>
  );
};

我还尝试了以下提交方式

const submitterFormatter = (submitter, row) => {
  return (
    const toolTipInstance = toolTipComponent(submitter, row);
    <OverlayTrigger placement="bottom" overlay={toolTipInstance}>
      {submitter}
    </OverlayTrigger>
  );
};

推荐答案

我遇到了同样的问题。我不能解释为什么，但我只是通过在OverlayTrigger标签中添加一个标签来解决问题。我的格式化程序函数在Reaction类内。

我的解决方案：

tooltipFormatter(cell, row){
    return (<OverlayTrigger placement="right" overlay={<Tooltip id={String(row.id)}>{cell}</Tooltip>}><span>{cell}</span></OverlayTrigger>);
};

在这里，span标记解决了问题。

如果我改编您的代码，以下是解决方案：

submitterFormatter(submitter, row){
    return (<OverlayTrigger placement="bottom" overlay={<Tooltip id={String(row.id)}>{submitter}</Tooltip>}><span>{submitter}</span></OverlayTrigger>);
};      

然后，当我调用TableHeaderColumn的dataFormat参数时：

<TableHeaderColumn dataField="comment" dataFormat={this.tooltipFormatter}>TableHeader</TableHeaderColumn>

这篇关于反应引导覆盖触发器和工具提示错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！