'Placing a component inside of another in AEM 6.5.11

In HTL it is possible to insert a component inside of another componet by using

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

. Is there a way to do the same thing in React?

I have tried to use the '@adobe/aem-react-editable-components' package but I haven't had much luck.

aem


Solution 1:[1]

First there is a huge line between React and the HTL components. HTL is server side, gets compiled into JSP resolved at server side and digested DOM gets rendered on browser.

React is client side. DOM is built on browser and then rendered.

If you are trying insert HTL component inside a React component, NO, you cannot.

If you want to output DOM from HTL to be inserted into React component, technically doable using dangerously SetInnerHTML, but not recommended. Instead you have to pass the content of HTL component as input props into the React component and BUILD the React component at clientside.

If you can share more context on what exactly you are trying todo with code snippet, can suggest how to achieve.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Reporter

Related Questions