OverlayTrigger на пользовательском компоненте не работает

Question

Я пытаюсь показать всплывающее окно, когда пользовательский компонент (кнопка) зависает:

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/, и он говорит:

Обратите внимание, что запускающие компоненты должны иметь возможность принимать ссылку, так как будут пытаться ее добавить. Вы можете использовать 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 bootstrap 1.0.0-beta.14

Answer 1

Наконец-то я нашел решение здесь: https://github.com/react-bootstrap/react-bootstrap/issues/2208

Я изменил render функция MyComponent к

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

и теперь это работает.

Answer 2

Ваш пользовательский компонент должен передавать реквизиты обработчика событий.

      const FancyButton = ({ children, ...props }) => (
  <Button {...props}>
    {children}
  </Button>
);

Источник: https://github.com/react-bootstrap/react-bootstrap/issues/2208 .