I am working on popup menus. I have a
MenuButton that displays a
Menu when clicked. The natural approach is to have the
Menu a child of the
<MenuButton> <Menu> ... </Menu> </MenuButton>
but if the
MenuButton or any of its ancestors is not overflow:visible there’s a real chance that the
Menu is clipped. What I really want is to render the
Menu in the body (or the app’s top-level element), absolutely positioned adjacent to its parent button.
I’ve done searching and reading on the topic, looked at a variety of existing implementations,
- a single menu container component at the application level that gets passed its menu data as props.
- a render-in-the-body component that wraps the Menu, renders nothing, but calls React.render at various points in its lifecycle.
- an onClick handler that creates the menu React element and calls React.render, but it requires having a pre-arranged div in the DOM to act as the container node.
but none of them feel like a proper React approach and each fails in one way or another. This seems like a case where it would be so much easier to just reach in there and manipulate the DOM, but I don’t want to do that.
Is there a best practice for rendering components outside their parent?
Or, is there a way to define the
Menu outside its controlling
MenuButton that I’m not seeing?