reactjs - 自定义组件上的 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它说:
请注意,触发组件必须能够接受 ref,因为它将尝试添加一个。您可以将 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
- 反应引导 1.0.0-beta.14
解决方案
我终于在这里找到了解决方案:https ://github.com/react-bootstrap/react-bootstrap/issues/2208#issuecomment-301737531
我修改了to的render
功能MyComponent
return <OverlayTrigger trigger="hover" placement="auto" delay={{show : 700, hide : 0}} overlay={overlay}>
<span><MyFancyButton ... /></span>
</OverlayTrigger >
现在它可以工作了。
推荐阅读
- excel - Microsoft Excel 2016 Unicode (UTF-8) 不起作用
- jquery - 基于选择jQuery动态更改iframe的DIV类
- sql - 验证 6 位数字和逗号的 NVARCHAR
- azure-stream-analytics - Azure 输入事件提前到达
- scala - Scala,猫 - 如何使用 IO(或其他 monad)和 Either 创建无标记的最终实现?
- javascript - 我的组件(应用程序)不呈现来自子组件的输入(InputForm)
- angular - ngIf-block 中可观察到的角度 rxjs 错过了第一次更新
- kubernetes - 如何将用户凭据传递到 Kubernetes Pod 内的(用户受限的)挂载卷?
- c# - 当消息传入使用 AES 加密时,我需要从 NetworkStream 读取多少字节?
- python - 如何生成具有索引值约束的排列列表?