next.js 无法在其他组件中使用React工具提示

js81xvg6  于 2023-03-18  发布在  其他
关注(0)|答案(1)|浏览(115)

我试图为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>
)
}
42fyovps

42fyovps1#

您需要修改<TitleTooltip>组件以接收children(这是您希望工具提示应用到的元素,在您的示例中是<p>Hover me</p>),并在<OverlayComponent>中呈现子元素,如下所示:

function TitleTooltip({ children, placement = "top", title = "" }) {
  return (
    <OverlayTrigger
      placement={placement}
      overlay={<Tooltip id={`tooltip-${placement}`}>{title}</Tooltip>}
    >
      {/* Render the child element */}
      {children}
    </OverlayTrigger>
  );
}

下面的working demo演示了如何重用TitleTooltip组件。

相关问题