自定义组件上的 OverlayTrigger 不起作用

我试图在自定义组件（按钮）悬停时显示弹出窗口：

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>
    }
}

弹出窗口不显示。但是，如果我更改返回值，它会起作用render的函数MyComponent to:

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 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>
    }
}

我的版本：

• 反应16.8.6
• React 引导程序 1.0.0-beta.14

我终于在这里找到了解决方案：https://github.com/react-bootstrap/react-bootstrap/issues/2208#issuecomment-301737531 https://github.com/react-bootstrap/react-bootstrap/issues/2208#issuecomment-301737531

我用一个包装了该组件，它应该有一个工具提示<span> in the render的函数MyComponent to

return <OverlayTrigger trigger="hover" placement="auto" delay={{show : 700, hide : 0}} overlay={overlay}>
    <span><MyFancyButton ... /></span>
</OverlayTrigger >

现在可以了。