web-dev-qa-db-ja.com

ルートを使用したマテリアルUIメニュー

マテリアルUIをいじっています。ルートを使用してLeftNavを実装しましたが、IconMenu、またはリンクまたはルートを操作するメニューを取得する方法が見つかりませんでした。誰でも良いソース/チュートリアルを教えてくれますか？ドキュメントは不十分であり、両方のコンポーネントは、LeftNavのようにプロパティとして「menuItems」をサポートしていないようです。

reactjsmaterial-designmaterial-ui
19
gattermeier

2016年12月編集：linkButton propは非推奨、警告が表示されます：

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

したがって、単に小道具を削除します。

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

レポの例 、および ここのライブデモ 。

元の回答：

反応ルーターを使用している場合、<Link to="/some/page" />タグではなく<a>を使用することをお勧めします。

これを行うには、containerElement propを使用する必要があります

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

（={true}は、trueのみを渡す場合は省略できます。つまり、<MenuItem linkButton />は<MenuItem linkButton={true} />と同じです）

containerElementとlinkButtonの小道具は実際に文書化されています ボタンセクションで ですが、MenuItemでも使用できます。

55
DaxChen

linkButttonにMenuItem propを設定してリンクを生成し、hrefを追加することもできます。

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

Material-UI 1.0以降、新しい構文は次のとおりです。

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

（注：この例にはアイコンは含まれていません。そのための新しいListItemIconコンポーネントがあります。）

8
Matt Browne

linkButtonのprop EnhancedButtonは非推奨です。 hrefプロパティが提供されている場合、LinkBut​​tonは不要になりました。 v0.16.0で削除されます。

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

正常に動作します

7
Shashwat

（2018年9月の）既存の回答はどれも、react 16.4.2およびreact-router 4.2.2では機能しなかったため、これが私の解決策でした：

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

ご覧のとおり、MenuItemコンポーネントはLinkコンポーネントに囲まれており、アイテムに下線が引かないようにスタイルtextDecoration：Noneを追加しました。

2
Simon

自分で少し検索した後、私は少し異なる解決策を試しました：

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

サポートするJS関数を使用する場合：

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

うまくいけば、代替としての使用を証明します。

1
Matthew

onTouchTapが機能しません。onClickを使用する必要があります。下の例を参照してください。

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

これが他の人にも役立つことを願っています

1
Manish

IOSのSafariでreact-routerを使用してcontainerElementを動作させることができませんでした。マテリアルUIの0.17.2とreact-router@v3を使用していますが、ここで回避策があります。

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

実装は次のとおりです。これは、material-uiの公式Webサイトにあるものとまったく同じです。使用できるコンポーネントには、AppBar、Drawer、およびListItemが含まれます。 SelectableListはlet SelectableList = MakeSelectable(List)として実装できます。

<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