React实现简单的单页面

说明： 接下来我们要实现的效果是一组网站最常见的，导航切换效果，主要涉及的知识点就是react的路由（react-router）、React.Children、this.props.children;

效果如下图所示：

接下来就来看看具体的实现过程：

首先第一步是基本的搭建项目所需要的webpack等配置，这里就不粘贴这些代码了，有需要的就在页面底部所给的github链接上自行下载查看：

我们要写的内容集中放置在src这个文件夹中：

首先我们要先编辑入口函数app.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
{/*这里的Route.js就是编辑路由的文件*/}
import Routes from './Route.js';


ReactDOM.render(
    <div>
        <Routes />
    </div>,
    document.getElementById('app')
)

接下来是Route.js:

import React, { Component } from 'react';
import { Router, Route, browserHistory, IndexRoute } from 'react-router';

import Home from '../container/Home.js';
import List from '../container/List.js';
import About from '../container/About.js';
import Main from '../container/Main.js';

export default class Routes extends Component {
    constructor(props){
        super(props);
        this.state = {

        };
    }

    render(){
        return (
            <Router history={ browserHistory }>
                <Route path="/" component={ Main }>
                    <IndexRoute component={ Home } />
                    <Route path="home" component={ Home }/>
                    <Route path="list" component={ List }/>
                    <Route path="about" component={ About }/>
                </Route>
            </Router>
        )
    }
}

这里还有一个重要的Main.js

import React, { Component } from 'react';
import { Link } from 'react-router';
import Nav from './Nav.js';
import '../scss/pub.scss';

export default class Main extends Component {
    constructor(props){
        super(props);
        this.state = {

        };
    }

    render(){
        return (
            <div>
                { /*这个Nav组件就是我们编写的导航组件了*/ }
                <Nav>
                    <Link to="home">主页</Link>
                    <Link to="list">列表</Link>
                    <Link to="about">关于</Link>
                </Nav>
                <div>
                    { this.props.children }
                </div>
            </div>
        );
    }
}

Nav.js:

注意： React.Children 是顶层API之一，为处理 this.props.children 这个封闭的数据结构提供了有用的工具。

这里需要注意， this.props.children 的值有三种可能：如果当前组件没有子节点，它就是 undefined ;如果有一个子节点，数据类型是 object ；如果有多个子节点，数据类型就是 array 。所以，处理 this.props.children 的时候要小心。

如果不了解可以点击这里查看

import React, { Component } from 'react';
import '../scss/base.scss';

class Nav extends Component {
    constructor(props){
        super(props);
        this.state = {
            currentIndex: 0
        };
    }

    toggleItem = (index) => {
        return index === this.state.currentIndex ? 'active' : '';
    }

    render(){
        return (
            <div className="navContainer">
                <ul className="navBar clearfix">
                    {
                        React.Children.map(this.props.children,(element,index) => {
                            return (<li onClick={ () => { this.setState({ currentIndex: index }) } } className={ this.toggleItem(index) }>{ element }</li>)
                        })
                    }
                </ul>
            </div>
        );
    }
}

export default Nav;

具体代码请看