Comments (6)
Woah, ok. Even passing children to OutPortal is pretty unusual, let alone trying to nest that! I can see how this might be useful for these kinds of provider use cases, but it's difficult to think through exactly how this should work. I'm not aware of any good reason why this wouldn't work, but I've never tested it before myself.
That said, I'd be happy to support this if it's possible to do so without adding too much extra complexity or breaking anything else.
Do you want to look into it? If you can just work out why it doesn't work already then that'd be very useful, and if you want to open a PR to fix it that'd be even better.
from react-reverse-portal.
Thanks for so quick reply @pimterry , actually before opening this issue I've tried to understand the code myself already, but there was no luck cause I'm still a noob lol. However let me try for several extra hours, if I still can't figure it out, perhaps I will need your need. Thanks.
from react-reverse-portal.
Hmm it seems because the original design didn't expect OutPortal
to have children
in mind from the first place (as you stated above).
Instead of
App
InPortal
Constate
useColor.Provider
InPortal
Constate
useCounter.Provider
OutPortal // for InPortal>Constate>useColor.Provider
div
OutPortal // for InPortal>Constate>useCounter.Provider
div
button
Counter
...
here it is the actual component tree
so the behavior instead of replacing OutPortal
with InPortal
, it brings all props
(including children
) from OutPortal
to InPortal
.
Just an update to you, I'll diagnose closer the code.
from react-reverse-portal.
Hi @loia5tqd001 did you make any more progress here? Let me know if there's anything I can do to help.
from react-reverse-portal.
Hi @pimterry I really have no idea how to tweak the package to make it work for this use case 🤥 like I don't even know which question to ask, otherwise I asked already
from react-reverse-portal.
Ok, fair enough. Yes, this use case isn't a priority for me right now, or for normal usage in general I think, but I would like to support it in future if possible. I don't think there's anything that would make this impossible, it's just a bit difficult to work out the details.
If you or anybody else does work out the underlying issue here and put a PR together to fix it, I'd be very happy to look at that. I'll leave this open for now.
from react-reverse-portal.
Related Issues (20)
- iframes reload from source HOT 6
- Race condition when swapping nodes between <OutPortal/>s HOT 5
- Any way to prevent unmounting of the portal contents when changing portals that aren't located within the same component? HOT 2
- Child components are re-rendered when switching their OutPortal HOT 1
- How to Create Multiple InPortals HOT 1
- Not rendering before an outPortal is used HOT 2
- Unhandled Rejection (NotFoundError): Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node. HOT 9
- Giving style to intermediary div HOT 3
- How to *destroy* a portal? HOT 3
- Migrate from Travis to Github Actions? HOT 1
- Rendering portal in a new window causes error: "html" portalNodes must be used with html elements, but OutPortal is within DIV HOT 1
- Nextjs error HOT 1
- Queries around library usage HOT 1
- moving OutPortal doesn't cause unmount/mount, but *does* cause re-render HOT 2
- Props stay the same when InPortal content is hidden HOT 3
- Text field autoFocus doesn't work in a portal HOT 1
- Scroll position doesn't maintain HOT 2
- Some non-hook function results are not preserved after conditional OutPortal HOT 2
- Support for Preact HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-reverse-portal.