时间戳

首页 > 解决方案 > StencilJS - 在正文中插入元素而不是组件

javascript - StencilJS - 在正文中插入元素而不是组件

问题描述

我正在 StencilJS 中构建一个具有工具提示的组件。

我想将此工具提示的标记附加到 document.body 而不是我的组件中，因为当组件包装在具有溢出的元素中时会遇到问题：隐藏（工具提示被切断）

有什么办法可以做到这一点？

我在 React 中有完全相同的组件，我设法通过使用来修复它，ReactDOM.createPortal(tooltip, document.body)但我似乎无法在 Stencil 中找到类似的解决方案（另外，文档非常基础）。

我也尝试过手动生成元素，document.createElement但它很痛苦而且太冗长，而且我有几个图标作为我想包含的组件。

另一种解决方案是将 JSX 转换为实际标记的方法，然后我可以通过document.body.append(tooltip).

标签： javascriptjsxstenciljs

解决方案

createElement可能是最简单和最灵活的方式。

Ionic在创建叠加层（警报、模式、弹出框等）时会这样做。

const tooltip = document.createElement('my-tooltip');
tooltip.content = 'Tooltip Content <my-icon name="foo"/>';
document.body.append(tooltip);

通过这种方式，您可以轻松地将属性传递给tooltip，包括工具提示的位置（例如在 Ionic 的popover组件中）。

除了将 HTML 作为属性传递（并通过 使用它<div innerHTML={this.content}>），您还可以传递要包含的组件的名称，然后工具提示会使用createElement.

推荐阅读