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

西蒙·阿森诺

我试图在自定义组件(按钮)悬停时显示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>
    }
}

我的版本:

  • 反应16.8.6
  • React Bootstrap 1.0.0-beta.14
西蒙·阿森诺

我终于在这里找到了解决方案: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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

徽章组件的自定义颜色不起作用

Talend-tTutorialRow自定义组件不起作用

自定义组件ExtJS,不起作用setValue

Bootstrap上的HTML自定义字体不起作用

自定义 FeatureUnion 不起作用?

自定义命令不起作用

自定义指令不起作用

自定义 ProgressableStreamContent 不起作用

自定义标签不起作用

自定义EmailValidator不起作用

自定义 UICollectionViewFlowLayout 不起作用

自定义表单不起作用

Angular 8:自定义HTML属性在组件html中不起作用

带v模型的自定义开关组件不起作用

当某些路由位于自定义组件内时,react 重定向不起作用

将自定义组件与Angular2结合使用时,JQueryUI Sortable不起作用

AngularJS自定义引导CSS在组件级别不起作用

我的[(ngModel)]在Ionic 4的自定义组件中不起作用

角度自定义组件和角度路由不起作用

ngx-chips (ng2) 标签输入组件自定义主题不起作用

React + Typescript:复制自定义组件的道具-React.PropsWithoutRef对我不起作用

Vue - 自定义组件父 - 子通信不起作用

我的自定义组件在 React App.js 中不起作用

我的简单自定义 JavaScript 组件在 HTML 中不起作用?

自定义表格上的 CSS 材质选项卡不起作用

自定义复选框在Windows上的Chrome中不起作用

在iOS上更改IP后,使用自定义URL的直接更新不起作用

在angular2中<ng-content>上的自定义样式不起作用?

Polymer自定义元素上的伪元素不起作用