Question

我尝试使用react-router在我的页面中呈现一个React组件。

我使用的文件结构如下：

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

所以我想从属于pages的组件中的Main.js文件夹中呈现组件。 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（）{ 回来（ {/ *我想在这里渲染内容* /} ）; } }

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中，您可以将孩子传递到您的容器，如

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

如果要在React JSX上设置class，请务必使用 className 道具，而不要使用类，在element中你必须使用className道具代替class道具

注意：我认为最好将所有可视元素放在布局文件中，例如Header，Navigation，Sidebar， Footer然后将this.props.children放在wrapper div中，因此当您在不同路线之间导航时，包装内的内容会不断变化。并且您可以更新标题，导航，旁边等使用商店数据，有效状态。

将this.props.children传递给react-router

解决方案

1 个答案:

修改