reactjs - 使用 Reactjs 的侧边栏

Question

我正在尝试用 Reactjs 做一个侧边栏，但我没有得到它。

我想知道如何正确地将 props 从 App.js 传递到 Middle.js。

我的结构是index.js>routes.js>App.js>Header.js，Middle.js>Sidebar.js，(DashboardPage.js，AccountPage.js - 要动态渲染的页面)

Header.js -> 在图像处有一个 IndexLinkSidebar.js -> 有一个 IndexLink 和一个渲染 AccountPage.js 的链接

路由是为 App.js 设置的，但该组件应该在 Middle.js 组件内加载。

这是我的代码:

index.js

import 'babel-polyfill';
import React from 'react';
import { render } from 'react-dom';
import { Router, browserHistory } from 'react-router';
import routes from './routes';

render(
    <Router history={browserHistory} routes={routes} />, document.getElementById('app')
);

routes.js

import React from 'react';
import { Route, IndexRoute } from 'react-router';
import App from './components/App';
import DashboardPage from './components/middle/dashboard/DashboardPage';
import AccountPage from './components/middle/accounts/AccountPage';

export default (
    <Route path="/" component={App}>
        <IndexRoute component={DashboardPage} />
        <Route path="accounts" component={AccountPage} />
    </Route>
);

App.js

import 'babel-polyfill';
import React, {PropTypes} from 'react';
import ReactDOM from 'react-dom';
import Header from './common/Header';
import Middle from './middle/Middle'
import '../../css/style.css';

class App extends React.Component{
    var { app } = this.props;
    render() {
        return (
            <div>
                <Header />
                <Middle />
            </div>
        );
    }
}

export default App;

Header.js//img 处的 IndexLink

'使用严格';

import React from 'react';
import User from './User';
import {IndexLink, Link} from 'react-router';
import '../../../css/header.css';

class Header extends React.Component{
    render() {
        return (
            <div className="contactto-header">
                <div className="contactto-header-content">
                    <IndexLink to="/"><img className="contactto-header-content-logo" src="static/img/logo.png" alt="contactto logo" /></IndexLink>
                    <div className="contactto-header-content-alarm"></div>
                    <div className="contactto-header-content-user">
                        <User />
                    </div>
                </div>
            </div>
        );
    }
}

export default Header;

Middle.js

'use strict';

import React, {PropTypes} from 'react';
import '../../../css/middle.css';
import SideBar from './SideBar'

class Middle extends React.Component{
    render() {
        return (
            <div className="contactto-middle">
                <div className="contactto-middle-content">
                    <SideBar />
                    {app.children} // should render here
                </div>
            </div>
        );
    }
}

export default Middle;

侧边栏.js

'use strict';

import React from 'react';
import {IndexLink, Link} from 'react-router';
import '../../../css/sidebar.css';

class SideBar extends React.Component{
    render() {
        return (
            <div className="sidebar-container">
                <ul className="sidebar-container-ul">
                    <li className="sidebar-container-ul-li">
                        <IndexLink className="sidebar-container-ul-li-a" to="/">Dashboard</IndexLink>
                    </li>
                    <li className="sidebar-container-ul-li">
                        <Link className="sidebar-container-ul-li-a" to="accounts">Contas</Link>
                    </li>
                </ul>
            </div>
        );
    }
}

export default SideBar;

出了什么问题？

我是 React 新手，如果其他代码未正确完成，请告诉我:)

提前致谢。

Answer 1

首先，您的路线组件将通过 this.props.children 在 App 下可用。如果您想用它们包裹它们，可以尝试这样:

class App extends React.Component{
  render() {
    return (
      <div>
        <Header />
        <Middle>
          {this.props.children}
        </Middle>
      </div>
    );
  }
}

Middle.js 中的 then

class Middle extends React.Component{
  render() {
    return (
      <div className="contactto-middle">
        <div className="contactto-middle-content">
          <SideBar />
          {this.props.children}
        </div>
      </div>
    );
  }
}