我试图为React工具提示制作一个单独的组件,这样我就可以在我的项目中再次使用它,但它似乎不起作用,并在应用程序重新加载时给我一个错误。The Error
x1c 0d1x
我已经使用npm i react-bootstrap bootstrap
安装了react-bootstrap和bootstrap,我正在使用带有ReactJs的NextJs。
工具提示组件Tooltip.js
import { OverlayTrigger, Tooltip } from 'react-bootstrap';
export default function TitleTooltip({placement = 'top', title = ''}) {
return (
<OverlayTrigger
placement={placement}
overlay={
<Tooltip id={`tooltip-${placement}`}>
{title}
</Tooltip>
}
>
</OverlayTrigger>
)
}
我尝试使用Test.js
工具提示的组件
import TitleTooltip from '../tooltips/Tooltip';
export default function Testing(){
return(
<div>
<TitleTooltip placement='top' title={'This is some text'}>
<p>Hover me</p>
</TitleTooltip>
</div>
)
}
1条答案
按热度按时间42fyovps1#
您需要修改
<TitleTooltip>
组件以接收children
(这是您希望工具提示应用到的元素,在您的示例中是<p>Hover me</p>
),并在<OverlayComponent>
中呈现子元素,如下所示:下面的working demo演示了如何重用
TitleTooltip
组件。