Javascript 将活动类添加到链接（React JS）

具有从阵列显示菜单的组件

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

从“React”导入React
从“react router”导入{Link，browserHistory，IndexLink}
$（文档）.ready（函数（）{
$（“ul.a”）.first（）.addClass（“当前”）；
$（“li:not（：first child）”。单击（function（）{
$（“ul.a”）.first（）.removeClass（“当前”）；
});
});
功能标签（道具）{
const number=props.menuitems；
const listItems=numbers.map（（number）=>
{number.linkName}
);
返回(
{listItems}
);
}
导出默认选项卡

---

我通过Jquery向第一个元素添加了“curent”类，问题是当我从另一个页面开始时，类没有添加，但当我只是刷新页面时，它是正常添加

您所说的发生是因为类添加到documentReady事件中。当您从另一个页面到达时，事件已经被引发，但以下代码当然找不到dom元素，因为它不在页面中：

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

我的建议是避免使用jquery（以及从外部react修改dom），而是直接在react代码中添加类。 我猜你想做这样的事情：

 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

从“React”导入React
从“react router”导入{Link，browserHistory，IndexLink}
功能标签（道具）{
const number=props.menuitems；
const listItems=numbers.map（（编号，索引）=>
{number.linkName}
);
返回(
{listItems}
);
}
导出默认选项卡

评论不用于扩展讨论；这段对话已经结束。