在 AEM 6.5.11 中将一个组件放置在另一个组件内

Question

在 HTL 中，可以使用以下方法将一个组件插入到另一个组件中

<sly data-sly-resource="${ @path=somePath, resourceType='path/to/other/component' }"></sly>

。有没有办法在 React 中做同样的事情？

我尝试使用“@adobe/aem-react-editable-components”包，但运气不佳。

Answer 1

首先，React 和 HTL 组件之间存在巨大的界限。 HTL 是服务器端，被编译成在服务器端解析的 JSP，并且消化后的 DOM 在浏览器上呈现。

React 是客户端。 DOM 是在浏览器上构建然后渲染的。

如果您尝试在 React 组件中插入 HTL 组件，不，您不能。

如果你想从 HTL 输出 DOM 并插入到 React 组件中，技术上可以使用危险的

SetInnerHTML

，但不推荐。相反，您必须将 HTL 组件的内容作为输入 props 传递到 React 组件中，并在客户端构建 React 组件。

如果您可以分享更多关于您到底想用代码片段做什么的上下文，可以建议如何实现。

Answer 2

我面临同样的问题，子组件的占位符不可见

知道谁可以在 AEM 中进一步检查吗