If i'm changing my Redux store's state by dispatching an action, which component would get rendered?
If i have in my code:
ReactDOM.render(, document.getElementById('root'));
Does it mean that App and all of its children components would get re-rendered? Or just the components i'm currently viewing in my browser? (those are the components that are currently mounted on the DOM right?)
Related
I am trying to animate a React component that contains data fetched from elsewhere. Placing it in a ReactCSSTransitionGroup worked fine. That is, until I altered the component's render() method to return false until the data has been fetched (to prevent it from being rendered without data).
Now, I guess the component is mounted immediately, at which point the animation classes are added, but only rendered afterwards. Is this thinking correct? How can I get the component to be animated when render returns the actual component?
ReactCSSTransitionGroup activates whenever components are added and deleted to its props.children. Since your component is mounted before you fetch data, nothing will happen after data is fetched (I think this is true even if the component's render() method returns false. Let me know in the comments if that is incorrect)
Here's a solution
Just don't mount the component (in the solution, it's a <div key="1"> tag) until the react class receives the data. Use component states on the parent component to keep track of the state of your asynchronous request.
The ReactCSSTransitionGroup doesn't play nicely with tables as it's default behaviour is to wrap tags with a span element. You can provide it with your own component, but I found the solution quite heavy and complex.
I have a different approach that allows a React component to animate each time its content changes. The animation is continually triggered by toggling between 2 duplicate CSS styles.
Other than the ReactCSSTransitionGroup, another way is to write your own css transitions with an 'enter' class that is added to the component in componentdidmount. Keep in mind that you should change the state in a requestAnimationFrame because otherwise your class would be added in the same event loop as it is mounted, thus wont animate. Here's an example:
https://codesandbox.io/s/zkm5015y1x
Also, more on event loop, a talk by Jake Archibald:
https://www.youtube.com/watch?v=cCOL7MC4Pl0
I've seen that Vue3 has support for 'portals' via the Teleport component, which can render the dom of a component into a different place in the document then the component was specified.
Reading the docs gives the impression that all events, properties etc will follow the Vue component order, but that seems to be in conflict with Javascripts native bubbling of events.
Will keyboard bindings follow Vue component parents, the actual DOM, or somehow both?
DOM events are always DOM events, so they always propagate along the DOM tree, vue cannot change that.
The teleport documentation says that:
If teleport contains a Vue component, it will remain a logical child component of the teleport’s parent
So the special handling only happens when you are teleporting a vue component. The props passing and event emitting hence refer only to components.
I have a component that is using React Transition Group to animate a component as it changes from one component to the next.
The problem I am having is that the next component is loading before the current animation is finished, so it looks a bit odd.
I think i could solve this if it were possible to delay the render() method when the component updates, as it never really unmounts, and this is why the component flashes the next image.
there is FAR too much code involved to paste it all here so i made my github public, and created an issue there to show what I am experiencing.
also you can view the site as it is live for this debugging session.
stevensheaves.me
Also, no judgy, its not 100% finished.
You can simply use the callback of the Transition Group namely onEntered.
A callback fired immediately after the 'enter' or 'appear' classes are removed and the done class is added to the DOM node.
You can use a flag variable to display your content. Set it to true when the callback is fired and to false when it's onEntering
Have a look at this sandbox, the object doesn't seem to have the value defined onClose.
Forked codesandbox:
https://codesandbox.io/s/wqqyrv5xjl
I'm no expert, but I do have an app that is using a Semantic UI React dropdown with multiple selections just like you are. I don't rely on onClose, but instead keep track of selection state using onChange. Every time I get a change, I update state with the new selections. In my case I update my Redux state, but if you prefer, you can keep it in React component state.
So I'm in the beginning stages of learning Meteor and React and I just completed the tutorial on making a Todos list.
In the implementation we have a checkbox at the top that allows us to toggle between completed tasks and all tasks. This is set as a state.
There are also check boxes next to each task that can display a task as complete or not complete.
My question is, both of these check-boxes change in real time, yet only the former is designated as a state variable? Why is the task checkbox a prop?
The global checkbox is just linked to the state of the App component.
It gets more complex with the local checkbox of each Task component. The problem is that theApp component needs a global knowledge of all Task objects, e.g. to hide completed tasks.
Task components could hold the checkbox state, but it is not the way React works. In React, a parent component usually does not read the state of its children, but instead holds the state itself and passes relevant information the its children so that they can render it.
When a child needs to update some state, it does at the global level (see toggleChecked and deleteThisTask in the tutorial), so that its parent gets notified and rerenders the child. See here for another example.
Good explanation here (full version)