Nested/child HTML in a partial?

[tsasaobao]

Hello. Is there a way to create a component-like HTML wrapper in Hugo with children?
For example in React you can do

<WrapperComponent>
     <ChildComponent />
</WrapperComponent

In Hugo we have partials, blocks, templates, but I don’t see how we could achieve the above?

Perhaps you could pass a partial into a partial, but this is not the same, and not what I’m looking for.

{{ partial "wrapper-component" (dict "childPartial" "{{ partial "i-dont-know-if-this-is-valid"}}") }}

I’m looking for a way to compose many different partials together, and it would be great if the overall container/page could do that, rather than having partials nested in partials.

Any ideas appreciated! What do you think? Thanks

[maiki]

Hiya @tsasaobao.

Do you have an example of output you want and what you’ve tried? I’m not sure what you are asking, but I have a lot of experience using partials, so maybe an example of what you are trying to produce will help us along.

[tsasaobao]

hi @maiki.
For example if

Layout x.html contains:

{{ partial "a" }}

and partial a.html contains

<div>
{{ partial "componentA" }}
{{ partial "componentB" }}
</div>

I want the ability for componentA and componentB to be passed in through the dict of partial a rather than defined inside of partial a.

so something like this in layout x.html:

{{ partial "a" dict(
   "componentA" : "{{ partial "componentAType2" }}" 
   "componentB" : "{{ partial "componentBType1" }}"
 }}

Is something like this possible, where we can specify what partials will be present inside another partial?

Hopefully I didn’t make it even more confusing

Thanks

[jmooring]

The top-level call

{{ partial "a.html" (dict "ctx" . "partialsToRender" (slice "componentA.html" "componentB.html" )) }}

layouts/partials/a.html

{{ range .partialsToRender }}
  {{ if templates.Exists (printf "partials/%s" .) }}
    {{ partial . $.ctx }}
  {{ else }}
    {{ errorf "Partial %q not found" . }}
  {{ end }}
{{ end }}

[tsasaobao]

This is what I was looking for. Thank you!