The problem you are referring to is called prop drilling and typical solution it to use render prop for composition instead of nesting components. As well you can use Context to pass data deeper in the tree.
I don't want to pass them down, I wan't to pass them up :) For example when a user click a link, I need to trigger a page transition which is contained by an HOC higher in the tree.
To be able to trigger some action from the root component (for example, Router) you need to pass something down (for example, callback), then from the leaf component you can trigger some action, right? You not suppose pass callback on top, you rather elevate component which holds a state, pass down callback and then you can pass data on top using given callback. Do you see it same way?
Of course, would be nice if it was always like that :) I'll take again the example with my page transition. For performance and bandwidth purposes (the component have a video inside) I add this component inside my _app.js (I use Next.js for SSR). So I want that every time a user click an intern link (<Link as={'/route/page'} href={'/page?slug=${this.props.slug}'}>), the transition start, when first part of transition is finished, do a route change, after route change, play second part of transition.
Since can be used everywhere in my website, I can't elevate it as I want. And I don't want to deal with callbacks. This is why I need an event bus to notify my page transition when a link was clicked somewhere in the page, and pass it the necessary data.
This is the simplest way I found. But I'm open to any suggestions as I'm not a React expert
Ok, I got your situation. I feel like there is a good solution for it with a library with declarative animations, but I can't be sure, because I haven't done it.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
The problem you are referring to is called prop drilling and typical solution it to use render prop for composition instead of nesting components. As well you can use Context to pass data deeper in the tree.
I don't want to pass them down, I wan't to pass them up :) For example when a user click a link, I need to trigger a page transition which is contained by an HOC higher in the tree.
To be able to trigger some action from the root component (for example, Router) you need to pass something down (for example, callback), then from the leaf component you can trigger some action, right? You not suppose pass callback on top, you rather elevate component which holds a state, pass down callback and then you can pass data on top using given callback. Do you see it same way?
Of course, would be nice if it was always like that :) I'll take again the example with my page transition. For performance and bandwidth purposes (the component have a video inside) I add this component inside my _app.js (I use Next.js for SSR). So I want that every time a user click an intern link (
<Link as={'/route/page'} href={'/page?slug=${this.props.slug}'}>), the transition start, when first part of transition is finished, do a route change, after route change, play second part of transition.Since can be used everywhere in my website, I can't elevate it as I want. And I don't want to deal with callbacks. This is why I need an event bus to notify my page transition when a link was clicked somewhere in the page, and pass it the necessary data.
This is the simplest way I found. But I'm open to any suggestions as I'm not a React expert
Ok, I got your situation. I feel like there is a good solution for it with a library with declarative animations, but I can't be sure, because I haven't done it.