I have angular component, which is loading other components , now in a event change say dropdown item selection, i need to reload just one specific component. Is it Possible to do that?
I looked into some answers in stack overflow itself but mostly are about reloading the whole page.
<dropdown (change)="detectChange($value)" />
<Component-one></Component-one>
In one component i have a 'drop down' with few values, and other component say 'component-one' already loaded with it , when the value in the "dropdown" changes i need to reload "component-one".
It is a general question. First of all you need to understand what you want to achieve in the end.
One way for "reloading" component, pass some data to the component based on the dropdown value, so, it will automatically "reload".
The other way is that you can have url param or query param based on the dropdown value, and on dropdown value change, navigate to the route with new param value, so the component will "reload".
Related
I want to bind a dropdown to a query parameter in the URL, so
when opening /page?dropdown=foo, I want the dropdown to have foo pre-selected
and the other way round: when changing the dropdown's value to bar, to have the URL rewritten into /page?dropdown=bar.
My question now:
Is there an out-of-the-box way to tell vue-router to data-bind this?
Or do I need to do it by hand, so when entering/changing the route, setting the dropdown's value and using a :onchange on the dropdown to call router.replace()?
As far as I know, you can't bind it in the way you are thinking, but for sure there is a manner to achieve that.
On router config, it's possible to set props as true, which means that the route.params will be set as the component props, so dropdown will be set with the value on URL (foo or bar).
Make your component react to changes on prop dropdown, this can solve your first question.
For the second question, I think your approach is correct, using the replace method, which would change the URL, and navigate to it but without adding a new history entry, just replacing it.
I am new with react-spring. I am having trouble animating a component whenever it unmounts. I have a simple card with an onClick handler that's responsible for conditionally displaying my Overlay component. The animation works fine when mounting (from & enter works), but when closing the overlay, the component just disappears without animation (leave does not work). I suspect it's because of the conditional rendering of the component but I've been struggling for hours trying to find a solution for this one. Any help would be appreciated!
My current code: https://codesandbox.io/s/dry-leftpad-h3vmv
What I'm trying to achieve: https://codesandbox.io/s/048079xzw
P.S. The latter is using mauerwerk's lib. I don't want to use that.
What you were missing is this:
return expand.map(({ item, props, key }) => (
item && <animated.div
// ...etc
When you're controlling the mounting of a single component with useTransition, you need to conditionally render it based on the item being passed. In your case, when it's false it won't render (which will unmount if already mounted) and when it's true it will render (mount if unmounted).
Here's a working sandbox forked from yours: https://codesandbox.io/s/infallible-agnesi-cty5g.
A little more info
The first argument to useTransition is the list you want to transition. That watches for changes and sends back an array mapped with each item, a key and a style object (props) based on whether the item is truthy (entering) or falsy (leaving). So for a transition that mounts/unmounts a single element, conditionally rendering based on the truthiness of the item is key.
Check out the examples again here and you'll see the differences between transitioning a list, a toggle between two elements, and a single item.
For a list, no need to check for the existence of the item because the array changes.
For toggling between two elements, you use the truthiness of item to determine which element to render.
For a single element, item determines whether to render at all. This means it won't mount initially when you default to false, and will make sure you don't render 2 items whenever your isActive value changes.
I have two different components in my React application.One component to display pop up, and other for text search field.
There is no relation(parent-child)between them.
My question is when user clicks pop up message(component), be focused text field in another component.
How can I handle this situation without using document.getElementById?
only using a react a specific way like reactDOM with ref.
Is it possible to handle like that?
Thanks
Find the common parent component, and write a function which updates a state with ref of the element to be focused. Pass down that function as props to the second component.
And use <input ref={r => this.props.func(r)
Now on click of first component you can access this parent state.
I have a grid component and a dynamically determined second component.
There is a splitter component that always contains a grid in the top part.
A secondary component will be displayed in the bottom part of the splitter.
The type of secondary component will depend on the selected row type in the grid.
Select row 1 and the secondary component might be line chart
Select row 2 and the secondary component might be another grid...
As the user changes the selected row, the component and the data displayed will need updating.
Any ideas on how to set this up?
You can dynamically load second component with [ngSwitch] directive.
If you want to dynamically load them, build a code similar to this
<div [ngSwitch]="variable">
<app-first *ngSwitchCase="1"></app-first>
<app-second *ngSwitchCase="2"></app-second>
</div>
It's up to you how you will determine which component should be loaded. You can for example change value of a variable with jQuery of plain JavaScript to render specific component. Component will be automatically updated if you change a row.
If you want to automatically update content so the data from 1st component matches 2nd, you have to use some cross component communication provided by Angular4.
Good explanation how to do this here: https://www.youtube.com/watch?v=I317BhehZKM
I am looking for all web but I no found any solution, maybe because I am newer with React-Native universe.
Well, my question is about Node Parent change value of Children.
My situation is, I have a data controller and this data controller listen data from events and when the events happen it need update a component like Slider.
the render need be.
<DataListener url={this.state.service_url}>
<Slider style={this.styles.slider_component}/>
</DataListener>
I need understand the cycle to get a default Slider with my Class DataListener. Is it with props in constructor? How can I get the slider inside DataListener and change this value like this.default_slider.value = 0.4
Thanks Advance
Victor C Tavernari
You should pass down the value as a prop and then your slider component can deal with it appropriately. Of course DataListener has to get the value in the first place and as you have detailed that let's assume it is in state (when you update state (via this.setState(newState)) it will cause a re-render of the DataListener which will in turn re-render the Slider with the new property):
<DataListener url={this.state.service_url}>
<Slider style={this.styles.slider_component} value={this.state.value}/>
</DataListener>
the data controller event you refer to would then be something like
onEvent(e) {
this.setState({value: e.value});
}