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

我添加了＆＃34; curent＆＃34;由Jquery类到第一个元素，问题是当我从另一个页面出来时，类没有添加，但是当我只是刷新页面时它会正常添加。

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

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

1 个答案: