javascript - {this.props.children} 返回 null

Question

我正在学习react js，从本教程http://courses.reactjsprogram.com/courses/reactjsfundamentals/lectures/760395但当我尝试使用 this.props.children 时，我仍然遇到同样的问题。谁能告诉我出了什么问题吗？

这是我的 main.js

var React= require('react');
var Main= React.createClass({
    render:function(){
        console.log (this)
        return(
            <div className='main-container'>Hello from main
            {this.props.children}
            </div>
        )
    }
});

module.exports = Main; 

这是我的家

 var React = require('react');
 var transparentBG=('../style').transparentBG;
 var ReactRouter=require('react-router');
 var Link = ReactRouter.Link; 

var Home = React.createClass({
   render: function () {
     return (
       <div className='jumbotron col-sm-12 text-center' style={transparentBG}>
       <h1>git hub battle</h1>

       <p className='lead'> Some fancy motto</p>

       <Link to='/playerone'>

            <button type='button' className='btn btn-lg btn-sucess'>
            get started
            </button>
       </Link>

       </div>
     )
   }
 });


module.exports = Home;

这是我的路线

var React= require('react');
var ReactRouter= require('react-router');


var Router=ReactRouter.Router;
var Route=ReactRouter.Route; 
var IndexRoute=ReactRouter.IndexRoute;

var Main=require ('../components/Main');
var Home=require ('../components/Home');
var PromptContainer=require('../container/PromptContainer'); 

var routes=(

    <Router>
        <Route path='/'component={Main}>
        <Route path='/home' component={Home}/>
        </Route>
        <Route path='/'>
            <Route path='playerone' header='player one'component={PromptContainer}/>
            <Route path='playertwo/:playerone' header='player two' component={PromptContainer}/>

            </Route>
    </Router>

);

module.exports = routes;

Answer 1

你的路线应该是

var routes=(

    <Router>
        <Route path='/'component={Main}>
            <Route path='/home' component={Home}/>
            <Route path='playerone' header='player one'component=  {PromptContainer}/>
            <Route path='playertwo/:playerone' header='player two' component={PromptContainer}/>
        </Route>
    </Router>

);