带有Reactjs的侧边栏

时间:2016-06-06 18:21:16

标签: reactjs react-router

我正在尝试使用Reactjs做侧边栏,但我没有得到它。

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

我有结构index.js> routes.js> App.js> Header.js,Middle.js> Sidebar.js,(DashboardPage.js,AccountPage.js - 以dinamically方式呈现的页面)

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

'use strict';

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的新手,如果其他代码没有正确完成请告诉我:)

提前致谢。

3 个答案:

答案 0 :(得分:2)

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

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

然后在Middle.js

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

答案 1 :(得分:1)

有点不清楚你在问什么,但似乎你想知道如何将道具从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。

答案 2 :(得分:-3)

也许你可以使用https://www.npmjs.com/package/react-side-barExample中有一个完整的例子,看起来很好。

npm install --save react-side-bar