Automatisch this.props.children in verschachtelten Komponenten

Question

Ich gehe durch die react-router-tutorial und bin auf lesson 5 und habe eine Frage.

Die Lehre spricht von einer NavLink Komponente definiert, die die Link Komponente umschließt, und gibt ihm ein activeClassName Attribut, das verwendet wird, wie folgt:

<NavLink to="/about">About</NavLink> 

im Unterricht, sie definieren die NavLink Komponente, wie folgt:

// modules/NavLink.js 
import React from 'react' 
import { Link } from 'react-router' 

export default React.createClass({ 
    render() { 
    return <Link {...this.props} activeClassName="active"/> 
    } 
}) 

Was ich verwirrt, ist die Verwendung der selbstschließ Link Komponente. Nein, wo in der Definition von NavLink heißt es, die this.props.children innerhalb der Link Komponente zu setzen. Ich habe es ausprobiert wie folgt:

export default class extends React.Component { 
    render() { 
     return (
      <Link {...this.props} activeClassName="active">{this.props.children}</Link> 
     ) 
    } 
} 

und das funktioniert auch wie erwartet. Meine Frage ist warum? Was ermöglicht die selbstschließende Link Komponente in ihrer Definition automatisch die this.props.children der NavLink nehmen und in der Link Komponente setzen?

Answer 1

Dies ist aufgrund der Spread-Attribut auf der Link-Komponente {...this.props}. Dadurch können alle Eigenschaften von this.props, einschließlich this.props.children, in die Link-Komponente übernommen werden. Here ist eine Referenz davon.