React js 做一个导航栏的问题

#1

我正在用reactjs试做一个导航栏

现在想点击其中一个，就变紫色，其他黑色，（即高亮）
代码如下
nav

var nav;
nav = React.createClass({
    render: function () {
        return(
            <div className={this.props.className || ''}>
                <a className={this.props.status} >
                    <i className={this.props.icon + ' iconfont'}> </i>
                    {this.props.children}
                </a>
            </div>
        );
    }
});
module.exports = nav;

footer

var footer,
    Nav = require('./footerNav');
footer = React.createClass({

    render: function () {
        var msg=[
            {
                'icon':'icon-home',
                'name':'首页',
            },
            {
                'icon':'icon-bulb',
                'name':'发现',
            },
            {
                'icon':'icon-person',
                'name':'我的',
            }
        ];
        var $nodes = msg.map(function (v) {
            return(<Nav className="footer-nav" icon={v.icon}> {v.name} </Nav>);
        });
        return(
            <footer className="footer">
                {$nodes}
            </footer>
        );
    }
});
module.exports = footer;

如何点击其中一个nav组件，使其变高亮，其他nav组件变暗？
求解

#2

两个css 一个是高亮的 一个是非高亮的，nav 的className 根据市否已被点击返回

#3

我该如何在使正在点击的nav高亮的情况下，改变其他nav的不高亮情况？
就是如何在组件间共享信息？

#4

同级组件间互通的方法,

  1. 通过父组件协调
    2.以flux类的组件实现一个消息订阅和发布机制.

你的这种应该把 当前那个高亮的数据存在你组件里面, 在初始化子组件时把值传进去, 同时把点击事件的处理也传进去, 通过父组件来控制

#5 
var footer
  , Nav = require('./footerNav');

footer = React.createClass({
    getInitailState: function (){
        return {
            index: 0,
        }
    },
    handleClick: function(i) {
        this.setState({
            index: i,
        });
    },
    render: function () {
        var msg=[
            {
                'icon':'icon-home',
                'name':'首页',
                'index': 0,
            },
            {
                'icon':'icon-bulb',
                'name':'发现',
                'index': 1,
            },
            {
                'icon':'icon-person',
                'name':'我的',
                'index': 2,
            }
        ];
        var $nodes = msg.map(function (v) {
            return (
                <Nav
                    onClick={function(){this.handleClick(v.index)}}
                    className={this.state.index == v.index ? 'footer-nav active' : 'footer-nav'}
                    icon={v.icon}>
                    {v.name}
                </Nav>
            );
        });
        return(
            <footer className="footer">
                {$nodes}
            </footer>
        );
    }
});

module.exports = footer;

给 active 加高亮就可以了

建议用es6 写 方便很多.

#6 
    var React = require('react');

var NavComponent = React.createClass({
	getDefaultProps: function() {
		return {
			item:[{id:1,name:'首页'},{id:2,name:'发现'},{id:3,name:'我的'}],
		};
	},
	getInitialState: function() {
		return {
			index:this.props.index, 
		};
	},
	onhandleClick:function(e){
		if (this.state.index == e.currentTarget.getAttribute('data-id')) {
			return;
		};
		this.setState({
			index:e.currentTarget.getAttribute('data-id') 
		});
		this.props.setindex(e.currentTarget.getAttribute('data-id'));
	},
	render: function() {
		var items=[],that = this;
		return (
			<nav id="nav-menu">
		        <ul>
		            {
		            	this.props.item.map(function(item){
		            		if (that.state.index == item.id ) {
		            			return <li key={item.id} data-id={item.id} className="on" onClick={that.onhandleClick}><div className="item"><span className="icon icon-fix"></span><span className="name">{item.name}</span></div></li>
		            		};
		            		return <li key={item.id} data-id={item.id} onClick={that.onhandleClick}><div className="item"><span className="icon icon-fix"></span><span className="name">{item.name}</span></div></li>
		            	})
		            }
		        </ul>
		        <div className="border"></div>
		    </nav>
		);
	}
});
module.exports = NavComponent;

过去笨拙的写法

#7

很感谢，我已经写出来了，跟你的方法差不多

#8

谢谢，我还想请教你一个问题
这里的记录为什么要使用getDefaultProps设定而不是直接再定义一个变量，
如：

var NavComponent = React.createClass({
    item:[
        {id:1,name:'首页'},{id:2,name:'发现'},{id:3,name:'我的'}
    ]
   //......省略
});

props会有特别的什么优势吗？

#9

可以使用PropTypes监控你的组件是否得到了需要的数据。
并且没有写死，可以用高阶组件包裹后复用。
当然如果你认为你的app中，只出现这一次导航栏，倒不必考虑这个问题。
组件一定要分清 Container Component 和 Dumb Component
Container Components
Smart and Dumb Components

#10

我用上边的大神的方法没有实现导航栏。最近也在做react的项目，想请教是怎么做的。。。