What does {...this.props} mean in this code?
<div {...this.props} style={{ height: `100%`, }}
asked Apr 13, 2016 at 6:06
-
duplicate, check answer stackoverflow.com/questions/31048953/…– Mehdi RaashCommented Jan 31, 2017 at 22:25
Add a comment
|
3 Answers
The {...variable} syntax is called "spread attributes".
What this does is, basically, it takes every property of this.props (or any other passed variable) and applies them to the element.
Example:
props = {className: 'big', href: 'http://example.com'};
<a {...props} />
// the above line is equal to the following
<a className="big" href="http://example.com" />
I think it might be the spread operator (three dots) that are setting you off? :)
What does the three dots in react do?
Edit: To elaborate, you're probably looking at a JSX template? Each property will in fact be a CSS property for your style attribute in the resulting HTML. Also, the spread operator makes it so that all properties within this.props get expanded, i.e. the same thing as if each property in this.props was explicitly output in the template.
answered Apr 13, 2016 at 6:09
-
1@Zhao Yi, Taking code form stackoverflow.com/a/31049016/1589444
var component = <Component {...jsonboject} />;so in class definition ofComponentif you doconsole.log(this.props)inrenderfunction, it is like passing and array with different name, and access all keys of array directly form name variable in argument, like herethis.props. Commented Apr 13, 2016 at 6:34
{...this.props} means all of the props of current component. Let say you have object a and object b in props than {...this.props} means both a and b. You can pass all of your current component's props to another component by using this.
