I want to load the react component in AEM component. How will I mount the react component for a div in aem.
<sly data-sly-test="${properties.loadFromReactFlag}">
<div id="react-container"></div>
</sly>
<sly data-sly-test="!${properties.loadFromReactFlag}">
<p>Loaded from AEM</p>
</sly>
For id="react-container" this div I want to load the HTML from the react component.
Views
Replies
Total Likes
Hello @AnamikaP ,
In our project we have done by passing the jsonString which is returned from the Model Class to React via data tag
sample:
<sly data-sly-use.templates="core/wcm/components/commons/v1/templates.html">
<sly data-sly-use.helper="com.proj.core.models.SampleComponentModel"></sly>
<proj-sample-component aem-data='${helper.jsonString}'>
</proj-sample-component >
<sly data-sly-call="${templates.placeholder @ isEmpty = !showTemplate}"></sly>
</sly>
In React Component, read like below
SampleComponent.displayName = 'SampleComponent';
SampleComponent.propTypes = {
description_t: PropTypes.string.isRequired,
url: PropTypes.string.isRequired,
ctaTargetType: PropTypes.string,
};
export default SampleComponent;
But I am mapping the component by using map to but how will I load the react component in HTL for a specific div. I want to load the react component conditionally. In the below code snippet if flag is true then HTML should load from react component and if it is false HTML should load from the AEM.
<sly data-sly-test="${properties.loadFromReactFlag}">
<div id="react-container">LOAD from REACT</div>
</sly>
<sly data-sly-test="!${properties.loadFromReactFlag}">
<p>Loaded from AEM</p>
</sly>
Views
Replies
Total Likes
Hi @AnamikaP,
As far as I know, you can only render content via react inside an AEM component when the needed content is exposed to react (via json etc). Then the react application should read that data and target this <div>. Are you expecting something like this?
Regards,
Ramkumar
Views
Replies
Total Likes
in your component's HTL you write something like:
create one utility js file in your react module which will query the "reacttag" and render the respective react component with like :
import React from 'react';
import ReactDOM from 'react-dom';
function exportHtml(Component, htmlTag) {
/* let elements= document.querySelectorAll(htmlTag);
elements.forEach((element) => {
let compId = element.getAttribute("componentId");
ReactDOM.render(<Component componentId={compId} />, element);
}); */
}
export default exportHtml;
Hope this helps
Umesh Thakur
Views
Replies
Total Likes