Je suis en train de jouer avec de la matière-ui. J'ai implémenté LeftNav en utilisant des itinéraires, mais je ne pouvais pas trouver un moyen de faire fonctionner IconMenu ou Menu avec des liens ou des itinéraires. Tout le monde peut m'indiquer une bonne source/tutoriel? La documentation est insuffisante et les deux composants ne semblent pas prendre en charge la propriété 'menuItems' comme le fait LeftNav.
2016 December Edit: la prop linkButton
est deprecated, vous recevrez un avertissement:
Warning: Unknown props `linkButton` on <a> tag.
Alors, supprimez simplement l'accessoire:
<MenuItem
containerElement={<Link to="/profile" />}
primaryText="Profile"
leftIcon={
<FontIcon className="material-icons">people</FontIcon>
}
/>
Voici un exemple de repo , et la démonstration en direct ici .
Réponse originale:
Je voulais juste souligner que si vous utilisez react-router, vous voudrez peut-être utiliser <Link to="/some/page" />
plutôt que la balise <a>
.
Pour ce faire, vous devez utiliser la propriété containerElement
<MenuItem
linkButton
containerElement={<Link to="/profile" />}
primaryText="Profile"
leftIcon={
<FontIcon className="material-icons">people</FontIcon>
}
/>
(le ={true}
peut être omis si vous ne transmettez que true
, En d'autres termes, <MenuItem linkButton />
est identique à <MenuItem linkButton={true} />
)
Les accessoires containerElement
et linkButton
sont en réalité documentés dans la section des boutons , mais vous pouvez également l’utiliser dans MenuItem
.
Vous pouvez définir la propriété linkButtton
sur MenuItem
pour générer un lien, puis ajouter également une href
.
<MenuItem linkButton={true} href="link/to/some/page" primaryText="Sample Link" />
La propriété linkButton
de EnhancedButton
est obsolète. LinkButton n'est plus requis lorsque la propriété href
est fournie ..__ Elle sera supprimée à partir de v0.16.0.
<MenuItem onTouchTap={this.handleClose} href="/link/data">Link Item</MenuItem>
Fonctionne bien
Dans Material-UI 1.0 (actuellement en version bêta), la nouvelle syntaxe sera probablement la suivante:
<MenuItem
component={Link}
// the 'to' prop (and any other props not recognized by MenuItem itself)
// will be passed down to the Link component
to="/profile"
>
Profile
</MenuItem>
(Remarque: cet exemple n'inclut pas d'icône. Il existe un nouveau composant ListItemIcon
pour cela.)
Aucune des autres réponses n'a fonctionné pour moi (en septembre 2018 avec les réactions de réaction 16.4.2 et 4.2.2), c'est donc la mienne:
<Link to='/notifications' style={{textDecoration: 'none'}}>
<MenuItem>
Notifications
</MenuItem>
</Link>
Comme vous pouvez le constater, le composant MenuItem est entouré du composant Link et j'ai ajouté un style textDecoration: Aucun pour que l'élément ne soit pas souligné.
onTouchTap ne fonctionne pas pour moi, je dois utiliser onClick (voir l'exemple ci-dessous)
<MenuItem onClick={this.logout} containerElement={<Link to="/" />} primaryText="Sign out" rightIcon={<b style={style.rightIcon}><img className="menu-img" src="img/app/logout.png" alt="logout"/></b>}/>
espérons que cela aidera les autres aussi