reactjs – React Bootstrap OverlayTrigger和Tooltip问题

发布时间：2020-12-15 09:35:16 所属栏目：百科来源：网络整理

导读：我试图在一个格式化程序内使用react-bootstrap OverlayTrigger和Tooltip进行react-bootstrap-table并继续收到以下错误： OverlayTrigger唯一需要的prop是overlay,它应该是一个节点,而Tooltip唯一需要的prop是id(尽管他们的例子中没有一个显示你需要一个ID)需

我试图在一个格式化程序内使用react-bootstrap OverlayTrigger和Tooltip进行react-bootstrap-table并继续收到以下错误：

OverlayTrigger唯一需要的prop是overlay,它应该是一个节点,而Tooltip唯一需要的prop是id(尽管他们的例子中没有一个显示你需要一个ID)需要是一个字符串.

“onlyChild必须通过一个只有一个孩子的孩子.”

有问题的相关代码如下：

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>
  );
};

我还尝试了以下的submitterFormatter

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

解决方法

我有同样的问题.我无法解释为什么,但我只是通过在OverlayTrigger标签内添加标签来解决.我的格式化程序函数在React类中.

我的解决方案

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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!