gpt4 book ai didi

semantic-ui-react - React Semantic UI 中的内联弹出窗口/工具提示

转载 作者:行者123 更新时间:2023-12-04 12:39:12 27 4
gpt4 key购买 nike

我正在按照官方文档中的示例创建一个简单的弹出窗口: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>
);
};

但默认情况下,它将弹出窗口附加到 <body> 的末尾(这让我很困惑)。有什么方法可以指定确切地附加弹出窗口的位置,或者某种 inline选项?

附言我添加了一个 link to sandbox您可以在其中复制问题 - 只需在响应式移动模式下打开它并点击即可。

最佳答案

Popup组件实际上使用了 Portal组件将其渲染到一个门户和另一个 React 树中。这意味着 all of the props available on the Portal component也可在 Popup 上找到.如果您不希望您的弹出式门户安装在 <body> 上您可以指定一个 mountNode支撑您的 Popup这将让它安装在其他地方。

关于semantic-ui-react - React Semantic UI 中的内联弹出窗口/工具提示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51170064/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com