I'm trying to render multiple components on 'standard' DOM. The first
set(below) renders, but the second, identical set, does not. Any
idea why? btw, the 'Card' component is the same as 'JunkComponent'.
Could this be a "unique id" thing?
thanks in advance
this link should best explain:
http://pastebin.com/8f7HVyyj
You shouldn't create elements with same ids.
As you have two elements with id JunkTestComponent on your page. React renders <JunkComponent /> only in the first one.
Also if you want to render component in the #Card too you should call:
ReactDOM.render(<JunkComponent />, document.getElementById('Card'));
Related
Let's say I'm building out a <TextInput /> component.
I have 3 variations. In variation #1, the label is above the textinput; in #2 the label is the placeholder and moves up when clicked; in #3 it's inside the input above the placeholder.
Question1: Performance wise, which method of having the 3 variations is faster in terms of load times in the UI - putting it all in one component with conditional rendering in the JSX everywhere and having a prop to toggle between the three variations, or having 3 totally separate components and then importing a TextInput object and calling a specific variation in this fashion <TextInput.VariationA />?
Question2: Does importing the full TextInput object somehow lag the component instead of just importing VariationA by itself? Say for example if there are 1000 components inside the main import (like when importing Icons).
// This TextInput has TextInput.VariationA
// TextInput.VariationB and TextInput.VariationC
import TextInput from "myCustomTextInput"
// vs
import { VariationA } from "myCustomTextInput"
I don't think performance is going to problem, but I suppose you would handle it three different class with one component. You can give classnames via props where form component is used. And three different css styling will probably works.
I haven't try it before but I think it might works.
In our application, html 'input' tag is wrapped and named as lets say 'input-app'
We are using 'input-app' in different places in same html page and I am not able to do cy.get().type() on unique input tag as 'input-app' tag has 'input' which is having same ids.
Do not want to change 'input-app' component definition. What is solution to it?
I am guessing your wrapped input-app should not have the same id on every input,but it seems we are pass that point. Are there any other div elements that are parents of this wrapped input?
cy.get('THE_PARENT_ID').find('input').type('what you need to type')
If you can't change the component can you put your own id on the element that is wrapping it. for instance
<input-app id='YOUR_ID'></input-app>
cy.get('#YOUR_ID').find('input').type('what you need to type')
I need to apply multiple classes to a React component without installing anything extra. Is that possible?
<Component id="test1" className="blue-text kps hide-on-small-and-down" />
I also tried
<Component id="test1" className={`blue-text kps hide-on-small-and-down`} />
But nothing works.
I have been searching for hours but did not find anything that does not require extra installations.
Please do not downvote without explaining why.
Thank you
When you add a className directly to a component, it is passed to that instance of the component as a prop accessible inside the component as this.props.className, and it's up to you to apply that class to actual DOM elements inside your component.
Remember that a React component is not an actual DOM element, but a higher-order logical construct that will be translated into one or several DOM elements (while also adding behavior, etc.). CSS classes only apply to DOM elements.
I see a wrong usage of className in your code. className stands for standard class attribute in standard html. Quoting the documentation.
"To specify a CSS class, use the className attribute. This applies to all regular DOM and SVG elements like , , and others."
It is for regular DOM and SVG elements where you can use className attribute.
Example Fiddle
<div className="one two three">
This is the {this.props.name}
</div>
Example usage.
Adding another point I don't think using className to pass props down to child elements is a good idea since the className is serving a purpose here.
I made a Todo list with React js. This web has List and Detail pages.
There is a list and 1 list has 10 items. When user scroll bottom, next page data will be loaded.
user click 40th item -> watch detail page (react-router) -> click back button
The main page scroll top of the page and get 1st page data again.
How to restore scroll position and datas without Ajax call?
When I used Vue js, i’ve used 'keep-alive' element.
Help me. Thank you :)
If you are working with react-router
Component can not be cached while going forward or back which lead to losing data and interaction while using Route
Component would be unmounted when Route was unmatched
After reading source code of Route we found that using children prop as a function could help to control rendering behavior.
Hiding instead of Removing would fix this issue.
I am already fixed it with my tools react-router-cache-route
Usage
Replace <Route> with <CacheRoute>
Replace <Switch> with <CacheSwitch>
If you want real <KeepAlive /> for React
I have my implementation react-activation
Online Demo
Usage
import KeepAlive, { AliveScope } from 'react-activation'
function App() {
const [show, setShow] = useState(true)
return (
<AliveScope>
<button onClick={() => setShow(show => !show)}>Toggle</button>
{show && (
<KeepAlive>
<Test />
</KeepAlive>
)}
</AliveScope>
)
}
The implementation principle is easy to say.
Because React will unload components that are in the intrinsic component hierarchy, we need to extract the components in <KeepAlive>, that is, their children props, and render them into a component that will not be unloaded.
Until now the awnser is no unfortunately. But there's a issue about it in React repository: https://github.com/facebook/react/issues/12039
keep-alive is really nice. Generally, if you want to preserve state, you look at using a Flux (Redux lib) design pattern to store your data in a global store. You can even add this to a single component use case and not use it anywhere else if you wish.
If you need to keep the component around you can look at hoisting the component up and adding a "display: none" style to the component there. This will preserve the Node and thus the component state along with it.
Worth noting also is the "key" field helps the React engine figure out what tree should be unmounted and what should be kept. If you have the same component and want to preserve its state across multiple usages, maintain the key value. Conversely, if you want to ensure an unmount, just change the key value.
While searching for the same, I found this library, which is said to be doing the same. Have not used though - https://www.npmjs.com/package/react-keep-alive
I want to add a react component, a comments feature, to a non-react site.
The site has a news page with infinite scrolling. Under each news story I want to include the react comments component. I plan to model it after the FB tutorial here: http://facebook.github.io/react/docs/tutorial.html
My question is, how do I dynamically mount each React component to a DOM story element? Basically, I want to have many instances of the same react comments component, but with each instance tied to a unique story (div).
I think I need to render the react component on the server side, where I can dynamically set the React.renderComponent. Any pointers/examples appreciated.
When the post is added you need to have your data and the target dom node (we'll call these variables data and el)
React.render(<MyComponent data={data} />, el);
Or without JSX
React.render(React.createElement(MyComponent, {data: data}), el);
To clean up:
React.unmountComponentAtNode(el);
For server side rendering you can do:
React.renderToString(React.createElement(MyComponent, {data: data}))
and as long as the result of that ends up as el on the client, you can mount it with React.render as mentioned above.