如何在反应材料中使用AppBar菜单-ui

Question

我正在尝试让AppBar使用IconMenu，就像示例here一样，但菜单不会弹出。 这是我的代码（示例代码的精确副本）：

import React from 'react'
import ReactDOM from 'react-dom'

import AppBar from 'material-ui/lib/app-bar';
import IconButton from 'material-ui/lib/icon-button';
import NavigationClose from 'material-ui/lib/svg-icons/navigation/close';
import IconMenu from 'material-ui/lib/menus/icon-menu';
import MoreVertIcon from 'material-ui/lib/svg-icons/navigation/more-vert';
import MenuItem from 'material-ui/lib/menus/menu-item';

const AppBarExampleIconMenu = () => (
  <AppBar
    title="Title"
    iconElementLeft={<IconButton><NavigationClose /></IconButton>}
    iconElementRight={
      <IconMenu
        iconButtonElement={
          <IconButton><MoreVertIcon /></IconButton>
        }
        targetOrigin={{horizontal: 'right', vertical: 'top'}}
        anchorOrigin={{horizontal: 'right', vertical: 'top'}}
      >
        <MenuItem primaryText="Refresh" />
        <MenuItem primaryText="Help" />
        <MenuItem primaryText="Sign out" />
      </IconMenu>
    }
  />
);

ReactDOM.render(<AppBarExampleIconMenu />, document.getElementById('App'));

AppBar显示正常，但没有响应单击菜单图标。 这是google chrome的反应插件中显示的内容：

我猜这行＆＃39; null＆＃39;与问题有关...？

（使用材料-ui 0.14.2，反应0.14.6）

Answer 1

您是否尝试包含让父道具传递？像：

  <IconMenu
    iconButtonElement={
      <IconButton><MoreVertIcon /></IconButton>
    }
    targetOrigin={{horizontal: 'right', vertical: 'top'}}
    anchorOrigin={{horizontal: 'right', vertical: 'top'}}
    {...props}
  >
    <MenuItem primaryText="Refresh" />
    <MenuItem primaryText="Help" />
    <MenuItem primaryText="Sign out" />
  </IconMenu>

我认为AppMenu会将“开放式”道具传递给IconMenu并使其正常运行。