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.
Related
I have a child component sitting inside a parent component. Parent component has some information, say I, which keeps changing based on user actions. In child component I have a button, and I want to change state of this button based on current value of I.
What is idiomatic way of doing it in scalajs-react/React?
Pass it via props and optionally use Reusability to prevent the child components from needlessly re-rendering too often.
I have a main component which has 3 child components which are conditionally displayed. There are arrow buttons to change which child component is rendered. One of the children has states which need to persist even when the component is no longer the child which is displayed.
The problem is, I don't feel like the state data from this child component should be passed back to the parent as the method to maintain state. In this scenario i want the child's state to only live in the child component. Is there a method i could use to maintain this state? For example,
will the state persist if i render each child but use CSS (or some other option) to conditionally hide the non-active child?
You can add display: none, and the component will still be mounted and will keep the state. Although this might work I recommend lifting the state up to the parent. It seems like it should live there. Otherwise you can create a context wrapping the 3 children and manage the state there. Then in each child can subscribe to that context, but it seems like an over kill. I recommend lifting the state to the parent
In my React app, I have tabs at the top of the app, a sidebar for navigation and a section to the right of the sidebar, and below the tabs that show content. When the user clicks on a tab, the sidebar loads its navigation data from the backend. Then after loading it, by default it selects the first item in the sidebar and loads the content details. The content details are made up of different components and several backend calls may need to be made.
What I would like to do is display a progress bar just above the tabs which is shown the moment the user clicks on the tab. The progress bar is only dismissed after the entire content for both the sidebar and content details has been loaded. The sidebar and content details do not update or are even shown until they have completely retrieved all their data from the backend and done any other initialization.
Determining exactly when all the content has been loaded is tricky as each component in the sidebar and content details are responsible for retrieving data from the backend. The only solution I could think of is for each component to implement a publisher/subscriber mechanism. Each parent component notifies each child component that it needs to load its data. When the child component receives this notification and has retrieved its data from the backend and finished any other initialization, it then notifies the parent that it has completed. Only when the top-level component gets all notifications from all its direct children, does it then dismiss the progress bar and cause the content to be displayed.
Another possible approach is to have only the first child component retrieve all the data from the backend on behalf of all the descendent components and cache it in the local repository. This would eliminate the need for descendent components from having to call the backend and could quickly just retrieve the data from the local repository. But there is still the issue of initializing each nested component. If I show the entire content while it is still in the initialization phase, the user would notice this. Still, I suspect React renders most stuff so fast that users will probably not notice it.
I'm not sure if this is the approach I should be taking or if there is something more inherent in React that handles this.
A similar website where you can see this is at Google's:
https://fuchsia.dev
although this site probably has much fewer backend calls than the one I am working on. But in general, this is close to what I am looking to achieve.
Your solution with the subscriber pattern will work fine, but if you want something less complex, there are two common approaches:
If you are using redux, every child component dispatches that it is loading data right now with their unique id. When it finishes (or component is unmounted), it dispatches an action to remove the loading information. Parent component just checks redux store, if there is anything loading.
The second approach without redux is to pass a callback to the child components from the parent through props. This callback expects two parameters: unique id and bool value representing if the child components starts/finishes loading. When the child component starts loading, it calls the callback from the parent with a unique id and value true. When the child component finishes loading, it calls the callback again with the same unique id and value false. Parent component set to its state which child components are loading and renders the loading accordingly.
I have a <Skylight ref="foo".... /> component in my main Layout. How would I show the modal dialog of Skylight from a child component?
I mean, how would I call this.refs.foo.show() in my component and make this.refs.foo point to the Skylight component that is 3 or 4 levels up in the DOM?
You could introduce a top-level container component for modal dialogs, that populates its children based on the state of a collection in your top-level store. Then the child component could dispatch an action to create a modal dialog.
I implemented something similar for toast-style notifications; will post an example when I'm back at a keyboard...
I understand, why I have to interact with DOM through dispatcher in cases when I fetching data from database.
But should i use Flux way to do something like this:
Parent component have been rendered. It has two child components. One of them initially rendered, the second child should replace first child onClick on some button. All components are static (no database connection).
So, how should I implement this action onClick and replace first child with second one?
Dispatch event once the onClick has been fired, parent component should listen and re-render the new item.