reactjs - Automatic this.props.children in nested components -
i'm going through react-router-tutorial , on lesson 5 , have question.
the lesson talks defining navlink
component wraps link
component, , gives activeclassname
attribute, used follows:
<navlink to="/about">about</navlink>
in lesson, define navlink
component follows:
// modules/navlink.js import react 'react' import { link } 'react-router' export default react.createclass({ render() { return <link {...this.props} activeclassname="active"/> } })
what confuses me use of self closing link
component. no in definition of navlink
put this.props.children
inside of link
component. tried out explicitly follows:
export default class extends react.component { render() { return ( <link {...this.props} activeclassname="active">{this.props.children}</link> ) } }
and works expected. question why? allows self closing link
component in definition automatically take this.props.children
of navlink
, put inside link
component?
thats due spread attribute on link component {...this.props}
. allows properties of this.props
includes this.props.children
passed link component. here reference of that.
Comments
Post a Comment