Commutateur de classe sur les onglets avec React.js

J'ai donc un tab-component qui dispose de 3 éléments:

React.DOM.ul( className: 'nav navbar-nav', 
    MenuItem( uid: 'home')
    MenuItem( uid: 'about')
    MenuItem( uid: 'contact)
)

Et dans le .render de MenuItem:

React.DOM.li( id : @props.uid, className: @activeClass, onClick: @handleClick,
    React.DOM.a( href: "#"+@props.uid, @props.uid)
)

Chaque fois que je clique sur un élément, un routeur de la colonne vertébrale est appelée, qui va alors appeler le tab-component, qui à son tour appel à un page-component.

Je suis encore à essayer d'envelopper ma tête autour de le fait il n'y a fondamentalement un moyen de flux de données. Et je suis tellement habitué à manipuler le DOM directement.

Ce que je veux faire, c'est ajouter le .active classe à l'onglet cliqué, et de faire en sorte qu'il soit retiré de l'inactifs.

Je connais le CSS truc où vous pouvez utiliser un data- attribut et d'appliquer différents style de l'attribut qui est true ou false.

Le routeur de la colonne vertébrale déjà a déjà obtenu la variable uid et appelle la page de droite. Je ne suis pas sûr de la façon de mieux alterner les classes entre les onglets, car un seul peut être actif à la fois.

Maintenant, je pouvais garder un certain enregistrement de l'onglet qui est et a été sélectionné, et de basculer entre eux etc. Mais React.js a déjà ce record de maintien de la fonctionnalité.

La @handleClick voyez-vous, je ne veux même pas utiliser, parce que le routeur doit le dire à l' tab-component qui a donner le className: '.active' Et je veux éviter de jQuery, parce que React.js n'a pas besoin direct de manipulation du DOM.

J'ai essayé des choses avec @l'état, mais je sais pour sûr, il y a vraiment une élégante façon d'atteindre cet objectif assez simple, je pense que j'ai regardé une présentation ou vidéo de quelqu'un de le faire.

Je suis vraiment de s'y habituer et à changer mon état d'esprit à la réflexion Réagir-ively.

Simplement à la recherche pour les meilleures pratiques en chemin, j'ai pu le résoudre en un vraiment laid et encombrant, mais j'aime React.js parce que c'est tellement simple.

OriginalL'auteur TrySpace | 2014-03-17