将此this.props.children传递到react-router中的另一个文件

Question

我尝试使用react-router在页面中渲染一个React组件。

我使用的文件结构如下所示：

React/
  components/
    Container/
      Sidebar.js
      Main.js
    Container.js
    Header.js
    Layout.js
  pages/
    Main.js
    Lesson.js
  index.js

因此，我想Main.js的组件中的pages文件夹中呈现组件。 Sidebar.js保存导航菜单。

这是我尝试过的：

index.js

import React from 'react';
import ReactDom from 'react-dom';

import Layout from './components/Layout';

import { Router, Route, IndexRoute, hashHistory } from 'react-router';

import Index from './pages/Index';
import Lesson from './pages/Lesson';

const app = document.getElementById('app');
ReactDom.render(
  <Router history={hashHistory} >
    <Route path="/" component={Layout} >
      <IndexRoute component={Index} ></IndexRoute>
      <Route path="lesson" name="lesson" component={Lesson} ></Route>
    </Route>
  </Router>
,app);

Layout.js

import React from 'react';

import Header from './Header';
import Container from './Container';

export default class Layout extends React.Component {
  render() {
    return (
      <div>
        <Header />
        <Container />
      </div>
    );
  }
}

Container.js

import React from 'react';

import Sidebar from './Container/Sidebar';
import Main from './Container/Main';

export default class Header extends React.Component {
  render() {
    return (
      <div id="container">
        <Sidebar />
        <Main />
      </div>
    );
  }
}

Main.js

从'react'导入React；

导出默认类Main扩展React.Component {render（）{return（{/ *这里我要渲染内容* /}）; }}

Sidebar.js

import React from 'react';
import { Link } from 'react-router';
import sidebarStore from './Sidebar/SidebarStore.js';


export default class Sidebar extends React.Component {
  render() {
    return (
      <div id="nav-md-placeholder">
        <nav id="sidebar">
          <ul id="main-menu">
            <li class="ripple-btn">
              <Link to="/">
                <span class="item-align-fix">
                  <i class="glyphicon glyphicon-home" style={{'marginRight': '10px'}}></i>
                  <strong>
                    <span>index</span>
                  </strong>
                </span>
              </Link>
            </li>
            <li class="ripple-btn">
              <Link to="lesson">
                <span class="item-align-fix">
                  <i class="glyphicon glyphicon-home" style={{'marginRight': '10px'}}></i>
                  <strong>
                    <span>lesson</span>
                  </strong>
                </span>
              </Link>
            </li>
          </ul>
        </nav>
      </div>
    );
  }
}

在构建应用程序或浏览器控制台时，我的控制台上没有任何错误。 当我单击链接时，我重定向到以下URL，但没有任何反应：

Click on Index -> http://localhost/new-webclass/#/?_k=gukonu
Click on Lesson -> http://localhost/new-webclass/#/lesson?_k=7mcbcx

我不知道我是否以错误的方式设置了路线。 官方文档也无济于事。

这也是我要渲染的Lesson.js的示例：

import React from 'react';

export default class Lesson extends React.Component {
  render() {
    return (
      <h1>Lesson Page</h1>
    );
  }
}

解

请参阅随机用户的回答。 他提供了一个很好的解释。 因此，下面您将看到如何将{this.props.children}传递给具有所需组件的文件：

Layout.js

<Container main_content={this.props.children}/>

Container.js

<Main main_content={this.props.main_content}/>

Main.js

render() {
    return (
      <main class={this.MainContentPlaceholder} id="main-content-placeholder">
        <Overlay />
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 center-col">
        {this.props.main_content}
        </div>
      </main>
    );

Answer 1

在您的index.js文件中

<Router history={hashHistory} >
  <Route path="/" component={Layout} >
    <IndexRoute component={Index} ></IndexRoute>
    <Route path="lesson" name="lesson" component={Lesson} ></Route>
  </Route>
</Router>

<Route path="/" component={Layout} >充当父路由，所有其他路由是其sub-routes 。 及其使用的Layout组件

因此，即使更改路线， parent component也会保留在那里，新路线的组件会作为children传递到父级组件Layout ，但是您不会在Layout组件中呈现子级。

因此，在您的Layout.js文件中，添加以下行{this.props.children} ，示例

return (
  <div>
    <Header />
    <Container />
    {this.props.children}
  </div>
);

您可以重新排列它以适合您的需要，但是可以在要渲染传递给它的子组件的任何位置添加{this.props.children} 。

---

编辑

我认为您正在使事情变得复杂，无论如何您都可以做到这一点

在Layout.js ，您可以将子级传递给容器，例如

<Container>
  {this.props.children}
</Container>

然后在Container.js使用相同的方法传递子级

<Main>
  {this.props.children}
</Main>

在Main.js

render() {
    return (
      <main className={this.MainContentPlaceholder} id="main-content-placeholder">
        <Overlay />
        <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12 center-col">
          {this.props.children}
        </div>
      </main>
    );

记住要使用className prop而不是class ，在React JSX如果要在element上设置class ，则必须使用className prop而不是class prop

---

注意：我认为最好将所有视觉元素放置在布局文件中，例如Header ， Navigation ， Sidebar ， Footer ，然后将this.props.children放在wrapper div ，这样wrapper div的内容将保持不变在不同的路线之间导航时会发生变化。，并且您可以使用商店来更新标题，导航，预留等数据 ， 活动状态 。