添加活动类链接（阵营JS）

Question

会有从阵列

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

    $(document).ready(function() { 

    $("ul.tabs li a").first().addClass("current"); 

    $("li:not(:first-child)").click(function() { 
     $("ul.tabs li a").first().removeClass("current"); 
    }); 

    }); 

    function Tabs (props) { 

     const numbers = props.menuitems; 
     const listItems = numbers.map((number) => 
     <li key={number.link} ><Link to={number.link} activeClassName="current" className="tab-link">{number.linkName}</Link></li> 
    ); 
     return (
     <div> 
     <ul className="tabs" >{listItems}</ul> 
     <div className="tabs-header-stripe"></div> 
     </div> 
    ); 

    } 
    export default Tabs 

我补充说：“当前的”类的jQuery到第一要素，问题是显示的菜单组件。当我从另一个页面，类去不添加，但当我只是刷新页面这是添加normaly。

Answer 1

你说什么是因为该类添加在documentReady事件中发生。当溜溜从另一个页面到达该事件已经被提出，但当然是因为它不存在在页面下面的代码无法找到的DOM元素：

$("ul.tabs li a").first() 

我可以建议是避免使用jQuery（和从外部修改dom反应）并直接在反应代码中添加类。 我想你想这样做：

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

function Tabs (props) { 

    const numbers = props.menuitems; 
    const listItems = numbers.map((number, index) => 
    <li key={number.link} ><Link to={number.link} activeClassName="current" className={index === 0 ? "tab-link current" : "tab-link"}>{number.linkName}</Link></li> 
); 
    return (
    <div> 
    <ul className="tabs" >{listItems}</ul> 
    <div className="tabs-header-stripe"></div> 
    </div> 
); 

} 
export default Tabs