Render parent component from child component

[dotnetspark]

Background and Motivation

@javiercn say I have a component (Foo) currently displayed on a page. Then I decide all instances of Foo should be rendered inside a container (<div>). Do it manually sounds great when Foo is just being used few times, but not ideal if usability is high. Then, I create a Parent component to render the container and I make Foo to inherit Parent. The idea is any time Foo is rendered it should also render the parent it inherits from.
The big question is, Is this possible today? The way BuildRenderTree works is forward only (if I'm not mistaken), thus it renders parent then child. I haven't seen child then parent.

[mrpmorris]

The children can implement an EventCallback that the parent sets. When the child calls it, the parent can render.

[dotnetspark]

@mrpmorris I wish it was that simple. The callback just signal the parent to render, but I don't see how to get a reference to the fragment rendered by the child component so the parent can contain the child. If parent doesn't contain child is straightforward.

[mrpmorris]

Create a question on StackOverflow explaining what you want to achieve (not how you are trying to achieve it) and post a link here

[javiercn]

@ylr-research this is not a direction we plan to take.

Rendering happens in a hierarchical manner from parent to children. The only way to do what you want is via something like LayoutAttribute (which requires a LayoutView component wrapping it, which I think defeats the purpose of what you are trying to achieve) or by doing something with inheritance, however in order to do that effectively you would need to create a derived component to override BuildRenderTree and wrap it, or give up on the Razor syntax all-together.

I'm assuming you want to do this with multiple components, otherwise I would suggest you just wrap the component with a div in the markup, since that's the simplest solution that will work.

There might be other ways to achieve this like using a custom IComponentActivator to automatically wrap the component, however there's nothing I can feel confortable recommending here other than using a layout attribute.

That said, if your component always needs to be wrapped in some markup, the right place to do so is within the component itself.

This issue has been resolved and has not had any activity for 1 day. It will be closed for housekeeping purposes.

See our Issue Management Policies for more information.