Nesting AEM components and React Components

Avatar

Avatar

DriesVanbilloen

Avatar

DriesVanbilloen

DriesVanbilloen

25-10-2018

Hi all,

I'm currently learning how to work with the new AEM SPA editor. My goal is to use this SPA editor in real projects, but I'm stuck on the following concept.

I want to use the WCM tabs component that can insert other React Components. So the structure would be something like this:

tabs/

          tab1/

                    React-Component

          tab2/

                    React-Component

I tried this with the WKND events sample but it doens't render the WCM component on the page and i cannot seem to find any error.

My question is: Are there alternatives or projects that I can use to help me figure this out?

Thanks in Advance!

Replies

Avatar

Avatar

dgordon86

Employee

Avatar

dgordon86

Employee

dgordon86
Employee

25-10-2018

Hi DriesVanbilloen,

Very cool use case. I have not experimented with this but it might not be achievable with the Core Component Tab component. A few questions:

Are you using the Tab Component from Core Components? aem-core-wcm-components/content/src/content/jcr_root/apps/core/wcm/components/tabs/v1/tabs at master...

I haven't dug into the Tab component but at first glance, I'm not sure it will map properly to a React component since it doesn't seem that :type property is exposed in the exported JSON. This is needed in order to map the resource type to the SPA component. Will check internally on this and follow up.

Avatar

Avatar

DriesVanbilloen

Avatar

DriesVanbilloen

DriesVanbilloen

25-10-2018

I indeed use the tabs component that you linked!

Avatar

Avatar

DriesVanbilloen

Avatar

DriesVanbilloen

DriesVanbilloen

29-10-2018

The conversation continues and can be found in the following github issue: (Also a partial solution)

Composed React Components | WCM components · Issue #16 · Adobe-Marketing-Cloud/aem-guides-wknd-event...

Updates will also continue in the github issue.