hinzufügen aktive Klasse (React JS)

Question

Haben Sie eine Komponente zu verknüpfen, die Display-Menüs aus dem Array ist

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 

I „curent“ Klasse von JQuery erstem Elemente hinzugefügt, das Problem ist, wenn ich von einer anderen Seite, Klasse gehen nicht hinzufügen, aber wenn ich nur Seite aktualisieren Es ist normal hinzufügen.

Answer 1

Was Sie sagen, geschieht, weil die Klasse im documentReady-Ereignis hinzugefügt wird. Wenn yo von einer anderen Seite ankommen hat sich die Veranstaltung bereits angesprochen worden, aber natürlich kann der folgende Code nicht mit dem DOM-Element finden, weil es nicht in der Seite lautet:

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

Was kann ich vorschlagen, ist mit Jquery zu vermeiden (und Modifizieren der Dom von außen reagieren) und fügen Sie die Klasse direkt im reactive-Code. Ich vermute, Sie wollten so etwas tun:

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