Ist this.props.children für <Route> anders als andere React Components?

Question

Jede reagieren Komponente wird durch die folgende Funktion übergeben, in node_modules ReactElement.js gefunden:

ReactElement.createElement = function (type, config, children){ 
    . 
    . 
    . 
} 

Dazu gehört auch <Route> und <Router>. Betrachten Sie den folgenden JSX-Code von einem React Tutorial:

<Router history={hashHistory}> 
    <Route path="/" component={Layout}> 
     <IndexRoute component={Featured} /> 
     <Route path="Settings" component={Settings} /> 
     <Route path="Archives" component={Archives} /> 
    </Route> 
</Router> 

Der obige Code wird in den Code transpiled wird unter Verwendung von Babel gezeigt:

"use strict"; 

React.createElement(
    Router, 
    { history: hashHistory }, 
    React.createElement(
     Route, 
     { path: "/", component: Layout }, 
     React.createElement(IndexRoute, { component: Featured }), 
     React.createElement(Route, { path: "Settings", component: Settings }), 
     React.createElement(Route, { path: "Archives", component: Archives }) 
    ) 
); 

Von diesem Code, die "Kinder" der äußeren <Route> sind die innere 3 <Route>s. Wir wissen, dass:

<MyContainer> 
    <MyFirstComponent /> 
    <MySecondComponent /> 
</MyContainer> 

class MyContainer extends React.Component{ 
    render(){ 
     return (
     . 
     . 
     //This will be MyFirstComponent or MySecondComponent 
     {this.props.children} 
     . 
     . 
     ); 
    } 
} 

Aber das gleiche gilt für die <Route>s nicht wahr ist. Der Wert this.prop.children für den JSX-Router-Code gilt für die component-Prop, aber nicht für den Router selbst. Warum ist dieses Verhalten von this.props.children für <Route> anders als für jede andere ReactComponent?

Answer 1

Da Router seine Route Kinder Kinder löscht.

Hier ist die createRouteFromReactElement function from RouteUtils.js in reagieren-Router 3.0.1:

export function createRouteFromReactElement(element) { 
    const type = element.type 
    const route = createRoute(type.defaultProps, element.props) 

    if (route.children) { 
    const childRoutes = createRoutesFromReactChildren(route.children, route) 

    if (childRoutes.length) 
     route.childRoutes = childRoutes 

    delete route.children 
    } 

    return route 
} 

Beachten Sie die Linie fünften vom Ende: delete route.children.

Warum macht es das? Betrachten Sie diese invariante Warnung from Route.prototype.render:

render() { 
    invariant(
    false, 
    '<Route> elements are for router configuration only and should not be rendered' 
) 
}