javascript - 将 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 { 使成为() { 返回 ( {/* 这里我要渲染内容 */} )； }}

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>
    );
  }
}

在构建应用程序时，我的控制台和浏览器控制台中都没有出现任何错误。当我单击链接时，我重定向到以下网址，但没有任何反应:

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保留在那里，并将新路由的组件传递给父组件 Layout作为children ，但您没有在 Layout 中渲染子项组件。

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

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

您可以重新排列它以满足您的需要，但添加{this.props.children} 无论您想要渲染传递给它的子组件。

<小时/>

编辑

我认为你让事情变得复杂了，无论如何你可以这样做

在 Layout.js ，您可以将 child 传递到容器中，例如

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

在 Container.js使用相同的技术让 children 通过

<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 属性而不是使用 class，在 React JSX 中如果你想设置class在element上你必须使用className prop 而不是 class Prop

<小时/>

注意:我认为最好将所有视觉元素都放在布局文件中，例如 Header , Navigation , Sidebar , Footer然后放置this.props.children在 wrapper div ，因此，当您在不同路线之间导航时，包装器中的内容将不断变化。，您可以使用您的商店。