this.props.children在react-router

时间:2017-03-13 18:12:23

标签: reactjs react-router react-jsx

我是react-router的新手。我正在按照这个教程形式https://css-tricks.com/learning-react-router/

这是我写的代码: -

import React from 'react';
import ReactDOM from 'react-dom';
import {Router, Route, Link , IndexRoute, hashHistory, browserHistory} from 'react-router';

class Home extends React.Component{
  constructor(props) {
    super(props);
  }

  render(){
    console.log(this.props.children);
    return(
       <div>
         <h2>Im home</h2>
         {this.props.children}
       </div>
      )
  }
}


class MainLayout extends React.Component{
  constructor(props) {
    super(props);

  }
  render(){
    return(
         <div className="app">
           <header className="primary-header">fdgfdgf</header>
           <aside className="primary-aside">
              <ul>
                <li><Link to="/users">Users</Link></li>
                <li><Link to="/widgets">Widgets</Link></li>
              </ul>
           </aside>
           <main>
              {this.props.childern}
           </main>
         </div>
      )
  }
}

class SearchLayout extends React.Component{
  constructor(props) {
    super(props);

  }
  render(){
    return(
        <div className="search">
           <header className="search-header"></header>
           <div className="results">
              {this.props.childen}
           </div>
           <div class="search-footer pagination"></div>
        </div>
      )
  }
}

class UserList extends React.Component{
  constructor(props) {
    super(props);

  }
  redner(){
    return(
          <ul className="user-list">
            <li>Dan</li>
            <li>Ryan</li>
            <li>Michael</li>
          </ul>       
      )
  }
}




ReactDOM.render((
  <Router history={browserHistory}>
    <Route path="/" component={Home}>
      <Route component={MainLayout}>
        <Route component={SearchLayout}>
          <Route path="/users" component={UserList} />
        </Route>
      </Route>
    </Route>
  </Router>
  ), document.getElementById('root'));

就我而言,我设置路由器的方式我希望看到SearchLayout组件中的UserList组件,MainLayout组件内部的SearchLayout组件以及当我访问我的根目录时Home组件内部的整个组件页面,在我的情况下是localhost:8000。 但我所看到的只是Home Component中的h2标签,console.log(this.props.children)记录为null。

2 个答案:

答案 0 :(得分:1)

我认为问题是你正在访问localhost:8000而不是localhost:8000 / users

在localhost:8000,它与“/”路径匹配,只有Home组件。要查看SearchLayout内部的UsersList,在MainLayout内部,在Home内部,您需要转到/ users。如果您希望以“/”加载上述内容,则应在UserList上添加一个IndexRoute:

  <Router history={browserHistory}>
    <Route path="/" component={Home}>
      <Route component={MainLayout}>
        <Route component={SearchLayout}>
          <IndexRoute component={MyIndexComponent} />
          <Route path="/users" component={UserList} />
        </Route>
      </Route>
    </Route>
  </Router>

答案 1 :(得分:1)

现在呢?不确定你的结构吗?

import React from 'react';
import ReactDOM from 'react-dom';
import {Router, Route, Link , IndexRoute, browserHistory} from 'react-router';

const Home = (props)=>{
        console.log(props)
       return (<div>
         <h2>Im home</h2>
         {props.children}
       </div>)}


const MainLayout = (props)=>
         <div className="app">
           <header className="primary-header">fdgfdgf</header>
           <aside className="primary-aside">
              <ul>
                <li><Link to="/">Home</Link></li>
                <li><Link to="/users">Users</Link></li>
                <li><Link to="/widgets">Widgets</Link></li>
              </ul>
           </aside>
           <main>
              {props.children}
           </main>
         </div>


const SearchLayout = (props) =>
        <div className="search">
           <header className="search-header"></header>
           <div className="results">
              {props.children}
           </div>
           <div className="search-footer pagination"></div>
        </div>


const UserList = ()=>
          <ul className="user-list">
            <li>Dan</li>
            <li>Ryan</li>
            <li>Michael</li>
          </ul>       

ReactDOM.render((
  <Router history={browserHistory}>
    <Route path="/" component={MainLayout}>
        <Route component={SearchLayout}>
        <Route path={'/users'} component={UserList} />
        </Route>
    </Route>
  </Router>
  ), document.getElementById('root'));