我正在从本教程http://courses.reactjsprogram.com/courses/reactjsfundamentals/lectures/760395中学习react js,但是当我尝试使用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;

最佳答案

您的路线应为

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>

);

关于javascript - {this.props.children}返回null,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/38089856/

10-09 17:34
查看更多