this.props.children是否不同于 <Route> 比其他React组件好吗？

Question

Every react component is passed through the following function, found in node_modules ReactElement.js:

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

This also Includes <Route> and <Router> . Consider the following JSX Code from a React Tutorial :

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

The above code will be transpiled into the code shown below using Babel :

"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 })
    )
);

From this code, the "children" of the outer <Route> are the inner 3 <Route>s . We know that :

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

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

But the same is not true for the <Route>s . The value of this.prop.children for the JSX Router code applies to the component prop, but not the Router itself. Why is this behavior of this.props.children different for <Route> than any other ReactComponent?

Answer 1

Because Router deletes its Route children's children.

Here's the createRouteFromReactElement function from RouteUtils.js in react-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
}

Notice the line fifth from the end: delete route.children .

Why does it do that? Consider this invariant warning from Route.prototype.render :

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