0

我目前正在尝试了解 React Starter Kit 布局项目的方式以及它的部分如何协同工作。

目前正在为路线和组件而苦苦挣扎。路由的作用是决定在某个路径上显示什么，然后有组件App及其所有子组件，这些组件将被显示......围绕什么路由定义？

似乎App总是显示里面的内容。并且路由定义了App作为其子项的一部分在内部显示的内容，对吗？

4

1 回答 1

1

不。除非或直到您在路由配置中定义为根组件，否则组件内部的App内容并不总是显示出来。App

例如

  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <Route path="about" component={About}/>
      <Route path="users" component={Users}>
        <Route path="/user/:userId" component={User}/>
      </Route>
      <Route path="*" component={NoMatch}/>
    </Route>
  </Router>

在上面的代码定义中

  <Route path="/" component={App}>

导致App组件首先显示，所有其他路由路径都是App组件的子级。

因此，对于您问题的第二部分-“路线定义了在 App 内部显示的内容作为其子项的一部分，是否正确”

是的，您是对的-但是要将其他组件显示为根组件的子组件，您必须在根组件的渲染方法中通过

    {this.props.children}

例如

const App = React.createClass({
  render() {
    return (
      <div>
        <h1>App</h1>
        <ul>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/users">users</Link></li>
        </ul>
        {this.props.children}
      </div>
    )
  }
})

所以现在你要告诉当 url/显示我的根组件时App，如果路由是/about或/users显示AppieAbout或组件的子Users组件。

您的根组件App就像一个模板，您可以在其中将页眉、导航栏、页脚显示为静态内容。但是你说的身体部位

{this.props.children}

随着您的路线随着您的子组件的变化而变化。

于 2016-10-12T18:34:39.960 回答