问题描述
我正在尝试在formatter中使用react-bootstrap OverlayTrigger和Tooltip来进行react-bootstrap-table并保持出现以下错误:
I am trying to use react-bootstrap OverlayTrigger and Tooltip inside of a formatter for react-bootstrap-table and keep getting the following error:
OverlayTrigger唯一需要的属性是overlay,它应该是一个节点,而Tooltip唯一需要的属性是id(尽管他们的示例都没有显示您需要一个ID),并且它必须是字符串.
OverlayTrigger's only required prop is overlay which is supposed to be a node and Tooltip's only required prop is id (despite none of their examples showing that you need an ID) which needs to be a string.
必须将只有一个孩子的孩子传递给onlyChild."
"onlyChild must be passed a children with exactly one child."
相关代码如下:
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
I have also tried the following for submitterFormatter
const submitterFormatter = (submitter, row) => {
return (
const toolTipInstance = toolTipComponent(submitter, row);
<OverlayTrigger placement="bottom" overlay={toolTipInstance}>
{submitter}
</OverlayTrigger>
);
};
推荐答案
我遇到了同样的问题.我无法解释为什么,但是我只是通过在OverlayTrigger标签内添加标签来解决.我的格式化程序功能在React类中.
I had the same problem. I can't explain why but I simply solved by adding a tag inside OverlayTrigger tag. My formatter function is inside a React Class.
我的解决方案:
tooltipFormatter(cell, row){
return (<OverlayTrigger placement="right" overlay={<Tooltip id={String(row.id)}>{cell}</Tooltip>}><span>{cell}</span></OverlayTrigger>);
};
在这里,span标签解决了这个问题.
Here, span tag solved the problem.
如果我修改了您的代码,以下是解决方法:
If I adapt your code, here's the solution :
submitterFormatter(submitter, row){
return (<OverlayTrigger placement="bottom" overlay={<Tooltip id={String(row.id)}>{submitter}</Tooltip>}><span>{submitter}</span></OverlayTrigger>);
};
然后,当我调用TableHeaderColumn的dataFormat参数时:
Then, when I call in dataFormat parameter of TableHeaderColumn:
<TableHeaderColumn dataField="comment" dataFormat={this.tooltipFormatter}>TableHeader</TableHeaderColumn>
这篇关于React Bootstrap OverlayTrigger和工具提示问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!