I need to reattach a component to a different parent programmatically.
Let's say the parent of a div is a h1 element. If some button is pressed then this div should be detached and reattached to the body element directly.
How should I handle this in react.js? The component (the div in the above example) where I need this feature is part of a 3rd party library, so I don't have a way to influence where the user puts this component in the first place.
Related
I have a parent component that contains a list of objects, objectList. Each of these objects has a property called component that contains a component for that object. Each object also contains other data such as title and icon
In the parent component's return statement, I map over objectList and show both title and icon. These have an onClick that, when used, executes a render function that renders the object.component - effectively generating the component onClick.
My issue is that I want to control the zIndex of these generated components such that the last one that is clicked has the highest zIndex. I have tried following the answer here, and after implementing it almost works.
My issue is that the zIndex variable contained within the parent does not increment when the function executes in the rendered children components. Based on console.log() I can tell that the function runs, and there are no discernible errors. But the "global variable" that the parent holds simply does not increment.
What complicates matters is that if I simply include one of the children component in the return statement of the parent (instead of rendering them onClick), then the zIndex variable actually increments, and everything works.
So my question is: How do I increment a variable in a parent component through a list of objects containing components as properties?
For further understanding, I illustrate the heritage of the objects below:
<Parent Component> => Object{title:"myTitle", icon:"image.png", component:<myComponent/>
So I'm trying to understand how to move focus when a new page loads in my application. This question came to my mind: what could I do if I want to focus on some element that is somewhere outside of my component. It seems to me that everywhere they write about the focus it's always used with refs. You can pass ref to a child. What if I want to focus on element to reset the focus on the page when a link is clicked and new page component is loaded? Or if I want to make skip link component higher in the tree and focus on a header in element? I have a lot of components, it doesn't seem a great idea to pass refs down through several components.
I feel like I'm missing something.
I'm interested about this because I'm learning about accessibility and how to make possible to navigate page only with keyboard.
what could I do if I want to focus on some element that is somewhere
outside of my component.
What if I want to focus on element to reset the focus on the page when
a link is clicked and new page component is loaded?
You can just pass callback of focus handler into your inner component and call it when you want.
I have a TabView component that has multiple tabs containing components. These components have entire hierarchies of other components. How could I know from any child component nested arbitrarily deep in one of these hierarchies whether or not it's parent tab is in focus in the TabView?
Preferably, I would want to implement this similar to react-navigation's withNavigationFocus (or an equivalent hook) so that any component can know if it's in tab focus without having to pass props down the chain of components. I'm thinking you could have a TabViewContext that components can register themselves as focus listeners to by doing a useContext. The TabViewContext would be provided by the TabView and the TabView would be responsible for determining what registered listeners are in focus when tabs change. My dilemma is I don't know how the TabView could determine efficiently what nested child components come into focus when the tab changes. Any ideas?
In case the other parent tabs are hidden, you could test for visibility in plain JS, rather than have a much more complex solution...
Checkout this answer on how to do this.
So components that care about the visibility of their parent tab could use a ref for their own DOM elements and test whether they're visible or not. You could build this into a simple helper function or a hook
EDIT:
I'd suggest going with something like this:
Each Tab will provide a context with method for any descendant to register a callback that will be called when the Tab is hidden. The TabView can pass a "isVisible" prop to each tab (if it doesn't already), so Tab can know when its display changes.
When a Tab changes from visible to hidden. All registered callbacks will be called.
I would of course write a hook or a helper function to create this TabVisibilty context so each Tab component can use it in a reusable manner.
I have a third party child component which renders a table.
The parent component will render the child component with new data in props.
The parent will then use jquery selectors to select the rows from the child table that were thus rendered in this manner.
How can I get the parent to wait for the child component to render itself with the rows for the new data before it does the jquery row selection?
As the child is a third party component, I can't modify it to let the parent know when it's rendered.
You can use the appropriate lifecycle method to figure out when it's ready.
You can have componentDidMount send back a value telling the parent it's ready to be parse.
If you cannot edit the third-party component.. Check if there's available public method that you can use? Maybe it accepts a callback function as a prop?
I was able to workaround this by adding a mouse listener on the table itself and then using jquery's delegate method to route the click requests to the table rows.
I have a question regarding the architecture of an React application.
The application consists from main widget and a few other child widgets. Each of them may have other child widgets too. The widgets don't know what do they do, neither how many they are (they are provided by the user).
Here is an example:
In the picture below there are initially two widgets, each of them have several child widgets.
On step #1 the two widgets are visible and they have a few child widgets too.
On step #2 the user clicked somewhere on the page. Because of that, another child widget appeared in the first widget.
On step #3, user clicked in some of the child widgets in widget 2. In this case, only this widget should appear. The others in widget 2 should disappear.
On step #4 clicking on a child widget in widget 2 should cause that widget 1 will disappear entirely.
The question is - how do we manage this situation? I imagine clicking on child widget or somewhere on the page should notify the root so it will add a new widget or skip rendering of the other ones. However, I can't really imagine what to put in the state and how exactly to achieve this.
So, here is how we did it in the end of the ends:
We invented so called "exclusive mode" of an widget. The parent component passes a callback function via properties. Then, a child widget may request to be rendered in "exclusive mode".
When rendering in exclusive more is being requested, the parent renders only those widget, which key matches with the key of the widget, requested exclusive access.
In this way, only one Toolbar may be rendered or only some button may be rendered in given Toolbar.