Question

以下是我的代码。 app.js是根文件，about.js是一个只显示一些文本的文件，而index.js通过使用react-router处理所有路由。我想在app.js中渲染我的about.js.如果我不写＃34; this.props.children＆＃34;在app.js.内

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，是否有必要编写＆＃34; this.props.children＆＃34;在根组件？如果是这样，为什么？有没有其他方法可以实现react-router？

Answer 1

是，需要有this.props.children。

在index.js中，您已将路由定义为嵌套。如果您在 / 中声明了关于路线，那么您必须将该网页呈现为App的子级。如果您不想在App中调用 this.props.children ，那么请将它们分成相同级别的路由，但您将失去将其用作App的一部分的能力。

根据您对路由的定义，React路由器基本上将About组件作为子组件传递给App。如果你不使用 this.props.children ，你就无法做到。

如果您的应用程序中有其他页面，例如页面或索引页面。如果不使用 this.props.children ，它们也不会呈现。

Answer 2

是的，您需要使用app.js文件中的{this.props.children}来显示子路由页面。因为您设置app.js是路径路径=“/”中的索引路由。它将在主页中显示app.js数据，当您导航到下一个子页面时，它还会在同一页面中显示app.js数据和子页面数据。当您希望重用诸如Header导航菜单之类的组件以在所有页面中显示相同的标题而不重新创建标题组件时，它将非常有用。

Answer 3

this.props.children是由React在包含该组件的子组件的组件上自动设置的属性。您可以在不放置this.props.children的情况下使用react-router。

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

Answer 4

以下是使用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呈现props.children也列在GitHub上。路由在GitHub here上的index.jsx中定义。所有嵌套组件也都列在GitHub上。

React 0.14 - 使用react-router

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

About.js

Index.js - 处理路径的文件

4 个答案: