react 点击添加样式

Question

之前听一位大哥说可以把nav中的内容提前遍历到一个属性当中，然后在render中直接写那个对象，经过试验是可以，但是添加事件怎么办呢？每次setsState都不触发它呀!!!

import React from 'react';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import './component.css';

import Home from './home-page/home.jsx';  //home
import Permissions from './permissions/permissions.jsx';  //权限
import Connection from './connection/connection.jsx'  //网络连接
import Variable from './variable/variable.jsx';  //环境变量

const MyContainer = (Home)=>

    class extends React.Component{
        constructor(props){
            super(props);
            jQuery.Liutong.nav_Mark(6);
            this.state = {
                box:0
            }
            this.list_nav = ["首页","一级","二级","三级","四级"];

            this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
        }

        fillter_click(index){
            this.setState({
                box:index,
            })
        }


        render(){

            let Box;

            switch(this.state.box){
               case 0:{
                 Box = <Home />
               }break;
                case 1: {
                 Box = <Permissions />
               }break;
                case 2:{
                 Box = <Connection />
               }break;
                case 3:{
                 Box = <Variable />
               }break;
            }

            return(

                <div className="content-box">

                    <div className="view-box">
                        <div className="wrap width-max-100">
                            <div className="loader">

                                <div className="cre-object">

                                    <h4 className="cre-object-dash"> 创建集群 </h4>

                                    <div className="component-main">

                                        <ul className="component-nav-list">
                                            {
                                                this.list_nav.map((item,index)=>
                                                    <li key={index}
                                                        ref={`li_${index}`}
                                                        className={index == this.state.box?"_active":null}
                                                        onClick={(e)=>this.fillter_click(index,e)}
                                                    ><a>{item}</a></li>
                                                )
                                            }
                                        </ul>

                                        <div className="component-content">

                                             <Box />

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

            )
        }
    }


    export default MyContainer(Home);

Answer 1

谢邀...
写在render里

render(){
    let 动态组件;
    ...
    //给他赋值
    return(
        <动态组件 />
    )
}

Answer 2

没那么复杂

this.state = {
     _active: 0
}

className={index == this.state._active ? "_active" : null}

fillter_click(index){
            this.setState({
                _active: index
            })
        }

Answer 3

我现在都会抢答了.....