javascript - 带有反应路由器的 react 侧边栏

Question

我是 React 的新手，一直在尝试寻找一个示例，说明如何在 reactjs 中创建侧边导航栏并将 reactrouter 与它一起使用。现在，我有一个如下所示的“侧边导航” Pane :

import React, {PropTypes} from 'react';
import { Link, IndexLink } from 'react-router';

const Header = () => {
    return (
        <nav>
            <div>
                <ul>
                    <li>
                        <IndexLink to="/" activeClassName="active">Home</IndexLink>
                    </li>
                    <li>
                        <Link to="/courses" activeClassName="active">Courses</Link>
                    </li>
                    <li>
                        <Link to="/about" activeClassName="active">About</Link>
                    </li>
                </ul>
            </div>
        </nav>
    );
};

export default Header;

但我想将其变成侧边导航栏，但似乎无法在网上找到任何有关如何做到这一点的示例。

--------编辑--------

所以我尝试了这个，但仍然没有运气......

app.js 看起来像这样:

// This component handles the App template used on every page.
import React, {PropTypes} from 'react';
import SideBar from './common/Header';

class App extends React.Component {
    render() {
        return (
            <div className="container-fluid">
                        <SideBar />
                        {this.props.children}
            </div>
        );
    }
}

App.propTypes = {
    children: PropTypes.object.isRequired
};

export default App;

侧边栏组件:

import React, {PropTypes} from 'react';
import { Link, IndexLink } from 'react-router';

const SideBar = () => {
    return (
        <nav>
            <div>
                <ul>
                    <li>
                        <IndexLink to="/" activeClassName="active">Home</IndexLink>
                    </li>
                    <li>
                        <Link to="/courses" activeClassName="active">Courses</Link>
                    </li>
                    <li>
                        <Link to="/about" activeClassName="active">About</Link>
                    </li>
                </ul>
            </div>
        </nav>
    );
};

export default SideBar;

style.css 看起来像这样:

#app {
    font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #4d4d4d;
    min-width: 550px;
    max-width: 850px;
    margin: 0 auto;
}

a.active {
    color: orange;
}

nav {
    padding-top: 20px;
    padding-bottom: 20px;
}

.container {
    display: flex;

    > * { height: 100%; }

    .sidebar {
        width: 250px;
    }

    .content {
        width: 100%;
    }
}

Answer 1

这与其说是 React 问题，不如说是 CSS 问题 - 任何东西都可以用正确的 CSS 做成侧边栏。也就是说，在 React 中也有一个很好的设置方法，所以我将向您展示。

我建议使用以下或接近的东西。

路由器的结构如下:

<Route path="/" component={WrapperComponent}/>
    <Route path="/somepath" component={SomeComponent}/>
    ...
</Route>

WrapperComponent 看起来像

class WrapperComponent extends React.Component {
    render() {
        return (
            <div>
                <SideBar props... />
                { this.props.children }
            </div>
        )
    }
}

你的 SideBar 类看起来或多或少像你上面的(但重命名，因为它很重要;))

这会自动将当前 View 放置在 WrapperComponent 中，其中 { this.props.children } 位于边栏旁边(假设您已正确设置样式)。在此示例中，导航到 /something 将导致拆分布局，您的侧边栏位于左侧，SomeComponent 呈现在右侧。

对于样式，比如

.container {
    display: flex;
}

.container > * { height: 100%; }

.container .sidebar {
    width: 250px;
}

.container .content {
    width: 100%;
}

会让你接近。

编辑您使用的代码有一些问题 - 即使您复制/粘贴我更新的样式:

1. 您使用的是 .container-fluid 而不是我的样式使用的 .container。如果您使用的是 Bootstrap，而不是 display: flex，只需使用 bootstrap 列(即边栏上的 col-md-3 和 col-md-9 在内容上)- 或者通过使用 .container(-fluid) 以外的名称作为容器名称来避免 Bootstrap 冲突。
如果您希望应用样式，
2. SideBar 需要一个 className (.sidebar)。 SideBar 只是组件类，对 HTML 类名没有影响。您可以将 .sidebar 更改为 nav，如果这对您来说更容易的话。
3. 要么将 { this.props.children } 包装在带有 .content 的东西中作为一个类，要么确保在那里呈现的任何东西都有那个类。这可以通过接受潜在元素的 className 属性来实现。
4. 做点什么很有趣——但您也需要了解自己在做什么。只是将此处的内容复制/粘贴到您的代码库中，而无需先了解它的含义/它正在做的事情是在浪费您的时间 (imo)。