Listen to nested subcomponent render
See original GitHub issueHello, first of all, thanks for the awesome work.
I’m developing a plugin using reef as a reactive UI renderer, and I have a nested component structure like so:
App->Component
The component is attached to App.
I want to bind to Component’s render event to create a carousel inside it after it has been rendered. So far I’ve only found the base reef:render
which is fired every time any template has been rendered, and results in errors because the Component has not rendered any html yet.
How would I go about waiting for a specific template to finish rendering?
I tried comparing reef:render
event target but to no avail (it is also called every time even if the template is not going to be rendered).
Kind regards
Issue Analytics
- State:
- Created 2 years ago
- Comments:11 (5 by maintainers)
Top Results From Across the Web
javascript - Get containing component from nested component
The problem with using <CI label={"Title"}/> is that when I type into the input, the input "blurs" and I have to reselect it....
Read more >Avoiding deeply nested component trees | by Ruben Oostinga
When building frontends you will pass data from a parent component to a child component. Often the child component renders this data, ...
Read more >React Nesting Components: Rules to Follow - Bits and Pieces
A nested component is any child component linked to a parent component. This relationship between the child and parent components is formed ...
Read more >Use React to Render Nested Components - Free Code Camp
In this React tutorial we use React to render nested components. This video constitutes one part of many where I cover the FreeCodeCamp ......
Read more >Issue in working with nested component - Help - Livewire Forum
One quick idea is when parent is re-rendering - emit “parent-refresh-event” and when child is re-rendering emit “child-refresh-event” and listen ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@Falkan3 Apologies, as I’m a bit confused here.
The
reef:render
event event fires on a specific element whenever that element’s content is re-rendered, and bubbles up to thewindow
ordocument
(just like other events likeclick
do).You can attach you event listener directly to the element you want to listen for renders inside.
Historically, this was more complicated with nested components because the original element might get purged from the DOM, breaking the event listener, so I would recommend event delegation.
Today, you can now attach event listeners on specific elements using
on*
attributes in your template. Reef uses event delegation under-the-hood, and automatically handles when elements get added or removed from the DOM.It makes sense, I will try to simplify the logic, I separated the components because I wanted the code to me more modular and load on demand. Thank you for your time anyways.