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
Vous devez vous connecter pour publier un commentaire.
Pousser à l'état le plus haut de la hiérarchie des composants que possible et de travailler sur l'immuable
props
à tous les niveaux ci-dessous. Il semble logique de les stocker de l'onglet actif dans votretab-component
et de générer les éléments de menu données (this.props
dans ce cas) afin de réduire la duplication de code:De travail JSFiddle de l'exemple ci-dessous + un Routeur de la colonne vertébrale: http://jsfiddle.net/ssorallen/4G46g/
La MenuItem pourrait faire très peu de côté à partir d'ajouter un nom de classe et d'exposer un événement click:
React.renderComponent( TabComponent( uid: 'home' ) )
, lorsque l'URL change, déclenche une série de composants qui ne devrait pas le feu à tous mangé dans réagit logique. Lire les commentaires sur: jsfiddle.net/TrySpace/9a7TA/2Mais la partie technique, l':
this.props.active ? 'active' : null;
etactive: (this.state.activeMenuItemUid === menuItem.uid)
a fait le tour vraiment, ces expressions simples...Vous êtes en mesure d'appeler
setProps
sur le composant racine rendu avecReact.renderComponent
appels. Sur les routes des modifications, vous pouvez définir la nouvelle de l'onglet actif en appelantsetProps
. Dans mon exemple j'ai fait l'élément de menu actif de l'état, mais il pourrait être déplacé pour des accessoires afin de rendre cela possible.Pour être clair, la
.bind()
partie fait en sorte que soitprops
oustate
mise à jour sur son lié composant? Donc, pour que techniquement il n'a pas d'importance si je voudrais utiliserprops
oustate
? Il importe seulement à quel moment dans le cycle de vie je veux être en mesure d'y accéder. (mais sûrement, il serait préférable de diviserstate
etprops
funtionally.) Et une dernière chose:setProps
etsetState
à la fois déclencher les mêmes composants du cycle de vie?classSet
est depricated. Pourriez-vous mettre à jour votre violon? facebook.github.io/react/docs/class-name-manipulation.htmlOriginalL'auteur Ross Allen
Vous pouvez essayer réagir-routeur-active-componet - si vous travaillez avec bootstrap navbars.
OriginalL'auteur kurumkan
Vous pourriez essayer de pousser l'élément de menu cliquez sur gestionnaire à la hauteur du composant parent. En fait, je suis en train de faire quelque chose de similaire à ce que vous faites.. j'ai un haut niveau composant menubar que je veux utiliser une barre de menu modèle pour rendre la barre de menus et les éléments. D'autres composants peuvent contribuer à haut niveau de la barre de menus, en ajoutant à la barre de menu modèle... il suffit d'ajouter le menu de niveau supérieur, la submenuitem, et cliquez sur gestionnaire (qui est dans le composant ajout du menu). Le haut niveau de la composante serait alors de rendre la barre de menu de l'INTERFACE utilisateur et quand quelque chose est cliqué, il devrait utiliser le "rappel" de la composante cliquez sur gestionnaire de appel à. À l'aide d'un menu modèle, je peux ajouter des choses comme les styles css pour active/souris/inactifs, etc, ainsi que les icônes et les. Le haut niveau de la barre de menu composant peut ensuite décider de la façon de rendre les éléments, y compris la souris overs, clics, etc. Au moins, je pense qu'il peut.. encore du travail sur ce que je suis de nouveau à ReactJS moi-même.
OriginalL'auteur user3317868