wake-up-neo.com

Material-UI-Menü mit Routen

Ich spiele mit Material-ui. Ich habe LeftNav mit Hilfe von Routen implementiert, aber ich konnte keinen Weg finden, IconMenu oder Menü mit Links oder Routen zu arbeiten. Kann mir jeder auf eine gute Quelle/Anleitung verweisen? Die Dokumentation ist zu kurz und beide Komponenten scheinen 'menuItems' nicht als Eigenschaft zu unterstützen, wie dies bei LeftNav der Fall ist.

reactjsmaterial-designmaterial-ui
14
gattermeier

2016 December Edit: die linkButton-Eigenschaft ist veraltet, Sie erhalten eine Warnung:

Warning: Unknown props `linkButton` on <a> tag.

Also einfach die Requisite entfernen:

<MenuItem
  containerElement={<Link to="/profile" />}
  primaryText="Profile"
  leftIcon={
    <FontIcon className="material-icons">people</FontIcon>
  }
/>

Hier ist ein Beispiel-Repo und die Live-Demo hier .

Originalantwort:

Ich möchte nur darauf hinweisen, dass Sie, wenn Sie den reakt-Router verwenden, <Link to="/some/page" /> anstelle des <a>-Tags verwenden möchten.

Dazu müssen Sie die Variable containerElement verwenden

<MenuItem
  linkButton
  containerElement={<Link to="/profile" />}
  primaryText="Profile"
  leftIcon={
    <FontIcon className="material-icons">people</FontIcon>
  }
/>

(Der ={true} kann weggelassen werden, wenn Sie nur true, übergeben. <MenuItem linkButton /> ist mit <MenuItem linkButton={true} /> identisch.)

Die containerElement- und linkButton-Requisiten sind tatsächlich dokumentiert in den Buttons , aber Sie können sie auch in MenuItem verwenden.

53
DaxChen

Sie können linkButtton prop auf MenuItem setzen, um einen Link zu generieren, und dann eine href hinzufügen.

<MenuItem linkButton={true} href="link/to/some/page" primaryText="Sample Link" />
12
Hai Nguyen

Die Eigenschaft linkButton von EnhancedButton ist veraltet. LinkButton ist nicht mehr erforderlich, wenn die href-Eigenschaft bereitgestellt wird . Sie wird mit v0.16.0 entfernt.

<MenuItem onTouchTap={this.handleClose} href="/link/data">Link Item</MenuItem>

Funktioniert gut

6
Shashwat

In Material-UI 1.0 (derzeit in der Beta) wird die neue Syntax wahrscheinlich sein:

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

(Hinweis: Dieses Beispiel enthält kein Symbol. Dafür gibt es eine neue ListItemIcon-Komponente.)

4
Matt Browne

Nachdem ich mich ein wenig umgesehen hatte, entschied ich mich für eine etwas andere Lösung:

<MenuItem onClick={() => {handleClose("/#about")}}>About me</MenuItem>

Mit einer unterstützenden JS-Funktion:

function handleClose(nav) {
    window.location.href = nav;
}

Hoffentlich erweist sich der Einsatz als Alternative.

1
Matthew

Keine der anderen Antworten hat bei mir funktioniert (im September 2018 mit 16.4.2 und Reaktions-Router 4.2.2), daher ist dies meine:

<Link to='/notifications' style={{textDecoration: 'none'}}>
     <MenuItem>
          Notifications
     </MenuItem>
</Link>

Wie Sie sehen, ist die MenuItem-Komponente von der Link-Komponente umgeben, und ich habe den Stil textDecoration hinzugefügt: None, damit das Element nicht unterstrichen wird.

1
Simon

Ich konnte das containerElement nicht auf Safari unter iOS mit react-router Ausführen. Ich verwende 0.17.2 Von Material UI und [email protected] Und hier ist eine Arbeit, die für mich funktioniert hat:

  <MenuItem
    onTouchTap={() => {
      this._yourMethod()
      browserHistory.Push('/howItWorks')
    }}
    primaryText="Menu Link"
  />
0
JohnnyQ

Hier ist meine Implementierung, die genau so aussieht wie auf der offiziellen Website von material-ui. Die Komponente, die Sie verwenden können, umfasst AppBar, Drawer und ListItem. Das SelectableList kann als let SelectableList = MakeSelectable(List) implementiert werden.

<div>
  <AppBar 
    onLeftIconButtonTouchTap={this.handleLeftIconButtonTouchTap}
    title={title}
    showMenuIconButton={true}
    zDepth={0}
  />
    <Drawer 
      open={this.state.open} 
      docked={true} 
      onRequestChange={(open, reason) => {
        this.setState({open:false})
      }}
    >
      <AppBar title={title} />
      <SelectableList
        value={location.pathname}
        onChange={this.handleRequestChangeList}
       >
        <Subheader>Selectable Contacts</Subheader>
        <ListItem
          value={"link1"}
          primaryText="Link1"
        />
        <ListItem
          value={"link2"}
          primaryText="Link2"
        />
      </SelectableList>
    </Drawer>
 </div>
0
Shawn Zhang

onTouchTap funktioniert nicht für mich. Ich muss onClick verwenden. Siehe Beispiel unten

  <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>}/>

ich hoffe, das wird auch anderen helfen

0
Manish