Question

我正在研究本教程http://courses.reactjsprogram.com/courses/reactjsfundamentals/lectures/760395中的反应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;

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>

);

Answer 2

react-router允许您添加IndexRoute。

使Home成为IndexRoute的第一类路由组件。

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

现在可以渲染{this.props.children}

{this.props.children}返回null

2 个答案: