React Semantic UI中的内联弹出/工具提示

Question

React Semantic UI中的内联弹出/工具提示

我正在按照官方文档中的示例创建一个简单的Popup:https://react.semantic-ui.com/modules/popup

所以这是我目前的代码非常有效:

export default (state, methods) => {
  const { trigger, handleTooltipOpen, handleTooltipClose } = methods;

  return (
    <Popup className={ `tooltip ${ state.className }` } trigger={ trigger } open={ state.tooltipShown }
      onOpen={ handleTooltipOpen } onClose={ handleTooltipClose }
      on="hover" hideOnScroll>
        <p>Popup Text</p>
    </Popup>
  );
};

Run Code Online (Sandbox Code Playgroud)

但默认情况下,它会将弹出窗口附加到末尾<body>(这对我来说非常混乱).有没有办法如何指定准确附加弹出窗口的位置,或某种inline选项？

PS我已经添加了一个指向沙箱的链接,您可以在其中复制问题 - 只需在响应式移动模式下打开它并点击即可.

Answer 1

bri*_*osa 4

该Popup组件实际上使用该Portal组件将其渲染到一个门户和另一个 React 树中。这意味着组件上可用的所有 propsPortal也可以在Popup. 如果您不希望弹出门户安装在您的上，<body>您可以mountNode在您的上指定一个道具Popup，将其安装在其他地方。

归档时间：	7 年，5 月前
查看次数：	2026 次
最近记录：	7 年，5 月前