Question

我是新手做出反应并且一直试图找到一个如何在reactjs中创建侧导航栏并使用与它一起使用reactrouter的示例。现在，我有一个“侧面导航”窗格，如下所示：

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;

但是我想把它变成一个侧导航栏，但似乎无法在网上找到任何关于如何做到这一点的例子。

------- -------- EDIT

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

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;

SideBar组件：

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

这更像是一个CSS问题，而不是一个React问题 - 任何东西都可以成为一个带有正确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课程看起来或多或少与你上面的课程相同（但重命名，因为它很重要;）

这会自动将当前视图放在侧边栏旁边WrapperComponent { this.props.children }所在的位置（假设您正确设置了样式）。在此示例中，导航到/something会导致分割布局，左侧是侧边栏，右侧是SomeComponent。

对于样式，类似

.container {
    display: flex;
}

.container > * { height: 100%; }

.container .sidebar {
    width: 250px;
}

.container .content {
    width: 100%;
}

会让你接近。

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

您正在使用.container-fluid而不是我的样式使用的.container。如果您使用的是Bootstrap，而不是display: flex，只需使用自举列（即侧边栏上的col-md-3和内容上的col-md-9） - 或使用其他内容来避免Bootstrap冲突容器名称为.container(-fluid)。
SideBar需要className（.sidebar）。 SideBar只是组件类，对HTML类名没有任何影响。如果您更容易，可以将.sidebar更改为nav。
将{ this.props.children }作为一个类包裹.content或者确保正在呈现的任何内容都有该类。这可以通过接受潜在元素的className道具来实现。
制作一些东西很有趣 - 但你需要了解你所做的事情。只需将某些内容从此处复制/粘贴到您的代码库中，而无需先了解其含义/它正在做的是浪费您的时间（imo）。

reactjs sidebar with react-router

1 个答案: