我试图在自定义组件(按钮)悬停时显示Popover:
class MyComponent extends React.PureComponent<MyComponentProperties> {
public render(): JSX.Element {
const overlay: JSX.Element = (
<Popover id={this.uuid}>
<Popover.Content>
Hello world!
</Popover.Content>
</Popover>
);
return <OverlayTrigger trigger="hover" placement="auto" delay={{show : 700, hide : 0}} overlay={overlay}>
<MyFancyButton ... />
</OverlayTrigger >
}
}
class MyFancyButton extends React.PureComponent<MyFancyButtonProperties> {
public render(): JSX.Element {
return <button ...>Hover me!</button>
}
}
Popover不显示。但是,如果我将render
函数的返回值更改MyComponent
为:
return <OverlayTrigger trigger="hover" placement="auto" delay={{show : 700, hide : 0}} overlay={overlay}>
<button>Hover me!</button>
</OverlayTrigger >
我检查了https://react-bootstrap.github.io/components/overlays/#overlay-trigger,它说:
请注意,触发组件必须能够接受引用,因为它将尝试添加一个引用。您可以将forwardRef()用于功能组件。
我不确定该怎么做。我尝试在中添加ref
属性MyFancyButtonProperties
并将其转发到button
,但是它不起作用:
class MyFancyButton extends React.PureComponent<MyFancyButtonProperties> {
public render(): JSX.Element {
return <button ref={this.props.ref} ...>Hover me!</button>
}
}
我的版本:
我终于在这里找到了解决方案:https : //github.com/react-bootstrap/react-bootstrap/issues/2208#issuecomment-301737531
我将render
功能修改MyComponent
为
return <OverlayTrigger trigger="hover" placement="auto" delay={{show : 700, hide : 0}} overlay={overlay}>
<span><MyFancyButton ... /></span>
</OverlayTrigger >
现在可以了。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句