Question

我有2个列卡，每个列卡的角落都有一个图标。卡显示在屏幕的下半部分。当用户单击图标时，redux操作将获取需要在图标旁边的弹出窗口中显示的数据。

我尝试了标注（https://developer.microsoft.com/en-us/fabric#/components/callout），但是在其外部单击时它没有关闭。更奇怪的是，如果我打开另一个标注，则来自新请求的数据将反映在两个标注中。我使用版本16.5

比我尝试过的引导程序覆盖（https://react-bootstrap.github.io/components/popovers/）

popoverRight = () => {
  return (<Popover id = "popover-positioned-right" title = "Popover right"> 
           {this.state.loading && (< div > Loading... < /div>)}
           {this.state.loaded && [...Here goes data rendering...]}
           </Popover>)
          }

render() {
    return ( <OverlayTrigger trigger = "click"
            placement = "right"
            overlay = {
            this.popoverRight
            } >
            <
            Button > Show top 10 < /Button> < /
            OverlayTrigger > )
  }

出现了3个问题：

图标位于底部时，叠加层会愚蠢地将自身渲染到屏幕底部之外（placement =“ right”）
弹出窗口不会自动调整大小以适合内容
当我滚动窗口时，弹出窗口会固定在原来的位置

有人知道某些组件（或如何强制上述2）满足以下要求：

应该巧妙地定位自己，使其靠近锚点，但应该可见（第二个标注示例似乎正确定位）
自动调整大小（或者在最坏的情况下允许设置其尺寸属性，以便在完成还原操作后重新调整大小）
滚动窗口时，它应该关闭或固定在锚点上
当用户在弹出窗口的外部（内部）单击时，它应关闭

反应弹出智能组件

0 个答案: