Can we allow multiple component inside a SPA component build in React ? | Community
Skip to main content
K
Kaibalya_123
March 10, 2022
Solved

Can we allow multiple component inside a SPA component build in React ?

  • March 10, 2022
  • 2 replies
  • 1090 views

Hello everyone!

 

In my local, I'm utilizing a SPA react component. I received a request for a bring option to allow multiple components inside SPA react components like Tab and Accordion.

 

  1. Is it possible to use the Tab and Accordion components feature within the SPA component?
  2. Is it the SPA React component or an AEM standard component that I will be permitted to use inside it?

 

Thank you.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Anmol_Bhardwaj

You can include a component inside another component within SPA, but, that must be done through code.

As AEM already provides a parsys functionality for the same, we can achieve this relatively easily through AEM component.

 

Inside your AEM component's HTML(which would be importing the SPA component), just add a parsys and in the template policy only allow Tab & Accordion for it.

Also, if you need it to be dependent on a option which is controlled by authoring, just add a sly-test on the parsys rendering.

2 replies

milind_bachani
Adobe Employee
milind_bachaniAdobe Employee
Adobe Employee
March 10, 2022

Hi @kaibalya_123 ,

 

The answer is totally subjective to requirement.

 

Best way to manage this is to create atomic and composite components.

 

For instance,
Atomic components can be - image, form fields

Composite components - Image card (image + heading) by using atomic components.

 

Also refer this repo : https://github.com/adobe/aem-react-core-wcm-components-spa/blob/master/README.md

 

Hope this helps, thanks.

    Anmol_Bhardwaj
    Community Advisor
    Anmol_BhardwajCommunity AdvisorAccepted solution
    Community Advisor
    March 10, 2022

    You can include a component inside another component within SPA, but, that must be done through code.

    As AEM already provides a parsys functionality for the same, we can achieve this relatively easily through AEM component.

     

    Inside your AEM component's HTML(which would be importing the SPA component), just add a parsys and in the template policy only allow Tab & Accordion for it.

    Also, if you need it to be dependent on a option which is controlled by authoring, just add a sly-test on the parsys rendering.

      Terms & ConditionsAccessibility statement

      Loading footer...