当鼠标悬停在自定义组件(按钮)上时,我想显示一个弹出框:
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>
}
}
弹出框没有显示。但是,如果我将MyComponent
的render
函数的返回值更改为以下内容,则它可以正常工作:
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,它说:
请注意,触发组件必须能够接受ref,因为Overlay将尝试添加一个。对于函数组件,您可以使用forwardRef()。
我不确定如何实现这一点。我尝试在MyFancyButtonProperties中添加一个ref属性,并将其转发到button,但它不起作用:
class MyFancyButton extends React.PureComponent<MyFancyButtonProperties> {
public render(): JSX.Element {
return <button ref={this.props.ref} ...>Hover me!</button>
}
}
我的版本:
- React 16.8.6
- React Bootstrap 1.0.0-beta.14