javascript - 将事件类添加到链接(React 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 将“当前”类添加到第一个元素，问题是当我从另一个页面进入时，类没有添加，但当我刷新页面时它会正常添加。

Answer 1

发生您所说的情况是因为该类已添加到 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