React 0.14 - 使用反应路由器

Question

以下是我的代码。 app.js 是根文件，about.js 是一个只显示一些文本的文件，index.js 使用 react-router 处理所有路由。我想在 app.js 内渲染我的 about.js。如果我不在 app.js 中写入 "this.props.children"，它不会呈现。

App.js - 呈现其中所有子组件的根文件。

"use strict";

import React from 'react';
import { Link } from 'react-router';

class App extends React.Component {
  render() {
    console.log(this.props.children)
    return(
        <div>
            <h1>Hello !</h1>
            <Link to="about">About</Link>
            {this.props.children} **//Is this necessary?**
        </div>
    ) 
  }
}
export default App;

About.js

"use strict";

import React from 'react';

class About extends React.Component {
  render() {
    return(
        <div>
            <h1>About page!</h1>
        </div>
    )
  }
}
export default About;

Index.js - 处理路由的文件

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

/*Require own custom files*/
import App from './app';
import About from './about';

render((
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <Route path="about" component={About}/>
    </Route>
  </Router>
), document.getElementById('app'))

我正在使用 ecma6 在 React 0.14 中工作。为了使用react-router，是否需要在根组件中写"this.props.children"？如果是这样，为什么？还有其他实现react-router的方法吗？

Answer 1

this.props.children 是 React 在包含该组件的子组件的组件上自动设置的属性。您可以使用 react-router 而无需放置 this.props.children.

在您的情况下，App.js 组件中的 this.props.children 对应于放置在应用程序中 <App /> 标记内的内容。如果没有 <App /> 标签，则不会在其中放置子项，只会生成来自 App.js 的渲染。

Answer 2

是,要求有this.props.children.

在您的 index.js 中，您已将路线定义为嵌套路线。如果您在 / 中声明 about 路由，那么您必须将 about 页面呈现为 App 的子页面。如果您不想在 App 中调用 this.props.children，那么将它们分开，但您无法将其用作 App 的一部分。

根据您定义的路由，React 路由器基本上将 About 组件作为子组件传递给 App。不使用this.props.children是不行的

如果您的应用程序中有其他页面，例如关于页面或索引页面。如果不使用 this.props.children.

，它们也不会呈现

Answer 3

这是一个使用嵌套路由的完整示例 ReactSpeed.com。

ReactDOM.render(
  <Router history={browserHistory}>
    <Route path="/" component={HomePage}>
      <IndexRoute component={CardStack} />
      <Route path="/roadmap" component={Roadmap} />
      <Route path="/ajax" component={CardStackAjax} />
      <Route path="/infographics" component={CardStackInfo} />
      <Route path="/media" component={CardStackMedia} />
      <Route path="/forms" component={CardStackForm} />
      <Route path="/buttons" component={CardStackButton} />
      <Route path="/blog" component={PostSummary} />
      <Route path="/blog/:slug" component={PostDetail} />
    </Route>
    <Route path="*" component={HomePage}>
      <IndexRoute component={MissingRoute} />
    </Route>
  </Router>,
  document.getElementById('app')
);

HomePage component rendering props.children is also listed on GitHub. The routes are defined in index.jsx available on GitHub here。 GitHub.

中还列出了所有嵌套组件

Answer 4

是的，您需要使用 app.js 文件中的 {this.props.children} 才能显示您设置的 child 路由 pages.Because app.js是 Router path="/" 中的索引路由。它将在主页中显示 app.js 数据，当您导航到下一个 child 页面时，它还会在同一页面中显示 app.js 数据和 child 页面数据. 当您想重用 Header 导航菜单等组件以在所有页面中显示相同的 header 而无需重新创建 header 组件时，这将很有用。

React 0.14 - 使用反应路由器

React 0.14 - using react-router

reactjs

react-router

App.js - 呈现其中所有子组件的根文件。

About.js

Index.js - 处理路由的文件