web-dev-qa-db-fra.com

Menu de l'interface matérielle utilisant des itinéraires

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.

reactjsmaterial-designmaterial-ui
14
gattermeier

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.

53
DaxChen

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" />
12
Hai Nguyen

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

6
Shashwat

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.)

4
Matt Browne

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é.

1
Simon

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

0
Manish