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...
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 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 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
I trying to build a simple slide show using react (I am learning react) and have a question regarding the component composition/information flow.
I have a slides component which has two child components. One child, the slideContainer, displays the slide and the other component, the slideNavigation displays the navigation buttons (back/next).
The slides component receives the slides collection as prop and has the currentSlide as State. The slideNavigation component receives the currentSlide, the slides collection and the setCurrentSlide callback as props.
The slideNavigation component determines the new currentSlide based upon the button that was clicked, the slide collection and the currentSlide. The new currentSlide is returned to the slides component using the callBack. The slides component updates the state accordingly and passes it to the display component, which displays the new slide. See the code of the slides component below.
My question: It seems a bit weird to determine the new currentSlide in the navigation component, pass to back to its parent which passes it again to the navigation component where it just came from. Am i doing something wrong, are the components correctly composed??
You should add callbacks/props to your slidenavigation like:
onPrevSlideButtonClicked
onNextSlideButtonClicked
Then in your parent component you will add callbacks for each event and calculate the new slide (because that is where all your info is stored).
The only change that you can make is to move the determination of the new slide, from the slideNavigation to the parent slides component.
The slides component should hold the state and be responsible for managing it. It contains 2 dumb child components, the slideContainer and the slideNavigation. These child components should know nothing about what is going on; the Container should just show what it receives from the parent and the navigation should just return events that occur (the next and previous button clicks)
It should be the job of the parent slides container to manage the state transition by sending props down to the slideNavigation component, which would be tied to the buttons for the next and previous actions.
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.