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.