ecmascript 6 - Reactjs: Destructuring and formatting of params? -
working through reactjs tutorial , found (imo) neat little feature that's demonstrating destructuring of react parameters jsx object so:
import react, { component } 'react'; export default class mybutton extends component { render() { return ( <a {...this.props} >discover things!</a> ); }; }
and example of use:
<mybutton classname='btn btn-primary' href="//02geek.com" target="_blank" />
and result:
<a class="btn btn-primary" href="//02geek.com" target="_blank" >discover things!</a>
the more i'm looking @ , google it, more perplexed i'm getting. who/what responsible taking properties passed client, , mybutton component's ... notation, formatting out this?
i'm assuming react/jsx hocus pocus? i'm not including 3rd party transformers i'm aware of might doing this. pretty basic stuff now.
when use custom component mybutton
looks kind of html-tag you're setting attributes on (like classname
, href
). setting component (mybutton
) properties (or props
). if console.log(this.props.classname)
inside of mybutton
(in example) print "btn btn-primary".
so props set when use <mybutton classname='btn btn-primary' href="//02geek.com" target="_blank" />
available inside mybutton
, through this.props
.
what happens inside mybutton
takes this.props
object (the 1 values { classname: 'btn btn-primary'}
) , spreads them ordinary <a>
-tag. means a-tag these values passed down attributes. in example it's exact equivalent of this:
<a clasname={this.props.classname} href={this.props.href} target={this.props.target} >discover things!</a>
jsx (read more here), lets deal html inside of javascript way, translate above
react.createelement( 'a', { classname: "btn btn-primary", href: "//02geek.com", target: "_blank" }, "discover things!" );
as last step, react make final translation "classname" just="class" ("class" can't used inside of javascript because it's a reserved word).
so when these steps done, react takes care of turning react.createelement
calls actual dom elements can see in browser. in case output is:
<a class="btn btn-primary" href="//02geek.com" target="_blank" >discover things!</a>
Comments
Post a Comment