带有 Reactjs 的侧边栏

Question

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

我想知道如何正确地将 App.js 中的 props 传递给 Middle.js。

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

Header.js -> 在图片上有一个 IndexLink Sidebar.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;

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

中间的一个then.js

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

Answer 2

有点不清楚你在问什么，但似乎你想知道如何将道具从 App.js 传递给 Middle.js。方法如下：

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

现在在 Middle.js 中，您可以访问 this.props.someProp 中的 someProp。

Answer 3

也许你可以使用https://www.npmjs.com/package/react-side-bar。 Example中有完整的例子，看起来不错。

npm install --save react-side-bar